<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/multipage/form-control-infrastructure.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:35:42 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/standard.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/spec.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=../styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  
  <script defer="" crossorigin="" src=../html-dfn.js></script>
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   <hgroup><h1 class=allcaps>HTML</h1><p id=living-standard>Living Standard — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   
   

   
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=form-elements.html>← 4.10.6 The button element</a> — <a href=index.html>Table of Contents</a> — <a href=interactive-elements.html>4.11 Interactive elements →</a></nav><ol class=toc><li id=toc-semantics><ol><li><ol><li><a href=form-control-infrastructure.html#form-control-infrastructure><span class=secno>4.10.18</span> Form control infrastructure</a><ol><li><a href="form-control-infrastructure.html#a-form-control's-value"><span class=secno>4.10.18.1</span> A form control's value</a><li><a href=form-control-infrastructure.html#mutability><span class=secno>4.10.18.2</span> Mutability</a><li><a href=form-control-infrastructure.html#association-of-controls-and-forms><span class=secno>4.10.18.3</span> Association of controls and forms</a></ol><li><a href=form-control-infrastructure.html#attributes-common-to-form-controls><span class=secno>4.10.19</span> Attributes common to form controls</a><ol><li><a href=form-control-infrastructure.html#naming-form-controls:-the-name-attribute><span class=secno>4.10.19.1</span> Naming form controls: the <code>name</code> attribute</a><li><a href=form-control-infrastructure.html#submitting-element-directionality:-the-dirname-attribute><span class=secno>4.10.19.2</span> Submitting element directionality: the <code>dirname</code> attribute</a><li><a href=form-control-infrastructure.html#limiting-user-input-length:-the-maxlength-attribute><span class=secno>4.10.19.3</span> Limiting user input length: the <code>maxlength</code> attribute</a><li><a href=form-control-infrastructure.html#setting-minimum-input-length-requirements:-the-minlength-attribute><span class=secno>4.10.19.4</span> Setting minimum input length requirements: the <code>minlength</code> attribute</a><li><a href=form-control-infrastructure.html#enabling-and-disabling-form-controls:-the-disabled-attribute><span class=secno>4.10.19.5</span> Enabling and disabling form controls: the <code>disabled</code> attribute</a><li><a href=form-control-infrastructure.html#form-submission-attributes><span class=secno>4.10.19.6</span> Form submission attributes</a><li><a href=form-control-infrastructure.html#autofill><span class=secno>4.10.19.7</span> Autofill</a><ol><li><a href=form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute><span class=secno>4.10.19.7.1</span> Autofilling form controls: the <code>autocomplete</code> attribute</a><li><a href=form-control-infrastructure.html#autofill-processing-model><span class=secno>4.10.19.7.2</span> Processing model</a></ol></ol><li><a href=form-control-infrastructure.html#textFieldSelection><span class=secno>4.10.20</span> APIs for the text control selections</a><li><a href=form-control-infrastructure.html#constraints><span class=secno>4.10.21</span> Constraints</a><ol><li><a href=form-control-infrastructure.html#definitions><span class=secno>4.10.21.1</span> Definitions</a><li><a href=form-control-infrastructure.html#constraint-validation><span class=secno>4.10.21.2</span> Constraint validation</a><li><a href=form-control-infrastructure.html#the-constraint-validation-api><span class=secno>4.10.21.3</span> The constraint validation API</a><li><a href=form-control-infrastructure.html#security-forms><span class=secno>4.10.21.4</span> Security</a></ol><li><a href=form-control-infrastructure.html#form-submission-2><span class=secno>4.10.22</span> Form submission</a><ol><li><a href=form-control-infrastructure.html#introduction-5><span class=secno>4.10.22.1</span> Introduction</a><li><a href=form-control-infrastructure.html#implicit-submission><span class=secno>4.10.22.2</span> Implicit submission</a><li><a href=form-control-infrastructure.html#form-submission-algorithm><span class=secno>4.10.22.3</span> Form submission algorithm</a><li><a href=form-control-infrastructure.html#constructing-form-data-set><span class=secno>4.10.22.4</span> Constructing the entry list</a><li><a href=form-control-infrastructure.html#selecting-a-form-submission-encoding><span class=secno>4.10.22.5</span> Selecting a form submission encoding</a><li><a href=form-control-infrastructure.html#converting-an-entry-list-to-a-list-of-name-value-pairs><span class=secno>4.10.22.6</span> Converting an entry list to a list of name-value pairs</a><li><a href=form-control-infrastructure.html#url-encoded-form-data><span class=secno>4.10.22.7</span> URL-encoded form data</a><li><a href=form-control-infrastructure.html#multipart-form-data><span class=secno>4.10.22.8</span> Multipart form data</a><li><a href=form-control-infrastructure.html#plain-text-form-data><span class=secno>4.10.22.9</span> Plain text form data</a><li><a href=form-control-infrastructure.html#the-submitevent-interface><span class=secno>4.10.22.10</span> The <code>SubmitEvent</code> interface</a><li><a href=form-control-infrastructure.html#the-formdataevent-interface><span class=secno>4.10.22.11</span> The <code>FormDataEvent</code> interface</a></ol><li><a href=form-control-infrastructure.html#resetting-a-form><span class=secno>4.10.23</span> Resetting a form</a></ol></ol></ol><h4 id=form-control-infrastructure><span class=secno>4.10.18</span> Form control infrastructure<a href=#form-control-infrastructure class=self-link></a></h4>

  <h5 id="a-form-control's-value"><span class=secno>4.10.18.1</span> A form control's value<a href="#a-form-control's-value" class=self-link></a></h5>

  <p>Most form controls have a <dfn id=concept-fe-value>value</dfn> and a <dfn id=concept-fe-checked>checkedness</dfn>. (The latter is only used by <code id="a-form-control's-value:the-input-element"><a href=input.html#the-input-element>input</a></code>
  elements.) These are used to describe how the user interacts with the control.</p>

  <p>A control's <a href=#concept-fe-value id="a-form-control's-value:concept-fe-value">value</a> is its internal state. As such, it
  might not match the user's current input.</p>

  <p class=example>For instance, if a user enters the word "<kbd>three</kbd>" into <a href="input.html#number-state-(type=number)" id="a-form-control's-value:number-state-(type=number)">a numeric field</a> that expects digits, the user's input would
  be the string "three" but the control's <a href=#concept-fe-value id="a-form-control's-value:concept-fe-value-2">value</a> would remain
  unchanged. Or, if a user enters the email address "<kbd>  awesome@example.com</kbd>"
  (with leading whitespace) into <a href="input.html#email-state-(type=email)" id="a-form-control's-value:email-state-(type=email)">an email field</a>, the
  user's input would be the string "  awesome@example.com" but the browser's UI for
  email fields might translate that into a <a href=#concept-fe-value id="a-form-control's-value:concept-fe-value-3">value</a> of "<code>awesome@example.com</code>" (without the leading whitespace).</p>

  <p id=concept-input-value-dirty-flag><span id=concept-textarea-dirty></span><code id="a-form-control's-value:the-input-element-2"><a href=input.html#the-input-element>input</a></code>
  and <code id="a-form-control's-value:the-textarea-element"><a href=form-elements.html#the-textarea-element>textarea</a></code> elements have a <dfn id=concept-fe-dirty>dirty value flag</dfn>.
  This is used to track the interaction between the <a href=#concept-fe-value id="a-form-control's-value:concept-fe-value-4">value</a> and
  default value. If it is false, <a href=#concept-fe-value id="a-form-control's-value:concept-fe-value-5">value</a> mirrors the default
  value. If it is true, the default value is ignored.</p>

  <p>Some form controls also have an <dfn id=concept-fe-optional-value>optional value</dfn>.
  This largely mirrors the <a href=#concept-fe-value id="a-form-control's-value:concept-fe-value-6">value</a> but doesn't normalize to an
  empty string. <span class=note>This ought to be used sparingly, you generally want <a href=#concept-fe-value id="a-form-control's-value:concept-fe-value-7">value</a></span>.</p>

  <p><code id="a-form-control's-value:the-input-element-3"><a href=input.html#the-input-element>input</a></code>, <code id="a-form-control's-value:the-textarea-element-2"><a href=form-elements.html#the-textarea-element>textarea</a></code>, and <code id="a-form-control's-value:the-select-element"><a href=form-elements.html#the-select-element>select</a></code> elements have a
  <dfn id=user-validity>user validity</dfn> boolean. It is initially set to false.</p>

  <p>To define the behavior of constraint validation in the face of the <code id="a-form-control's-value:the-input-element-4"><a href=input.html#the-input-element>input</a></code>
  element's <code id="a-form-control's-value:attr-input-multiple"><a href=input.html#attr-input-multiple>multiple</a></code> attribute, <code id="a-form-control's-value:the-input-element-5"><a href=input.html#the-input-element>input</a></code> elements
  can also have separately defined <dfn id=concept-fe-values>value<em>s</em></dfn>.</p>

  <p>To define the behavior of the <code id="a-form-control's-value:attr-fe-maxlength"><a href=#attr-fe-maxlength>maxlength</a></code> and <code id="a-form-control's-value:attr-fe-minlength"><a href=#attr-fe-minlength>minlength</a></code> attributes, as well as other APIs specific to the
  <code id="a-form-control's-value:the-textarea-element-3"><a href=form-elements.html#the-textarea-element>textarea</a></code> element, all form control with a <a href=#concept-fe-value id="a-form-control's-value:concept-fe-value-8">value</a> also have an algorithm for obtaining an <span id=concept-textarea-api-value></span><dfn id=concept-fe-api-value>API value</dfn>. By
  default this algorithm is to simply return the control's <a href=#concept-fe-value id="a-form-control's-value:concept-fe-value-9">value</a>.</p>

  <p>The <code id="a-form-control's-value:the-select-element-2"><a href=form-elements.html#the-select-element>select</a></code> element does not have a <a href=#concept-fe-value id="a-form-control's-value:concept-fe-value-10">value</a>;
  the <a href=form-elements.html#concept-option-selectedness id="a-form-control's-value:concept-option-selectedness">selectedness</a> of its <code id="a-form-control's-value:the-option-element"><a href=form-elements.html#the-option-element>option</a></code>
  elements is what is used instead.</p>


  <h5 id=mutability><span class=secno>4.10.18.2</span> Mutability<a href=#mutability class=self-link></a></h5>

  <p>A form control can be designated as <dfn id=concept-fe-mutable><i>mutable</i></dfn>.</p>

  <p class=note>This determines (by means of definitions and requirements in this specification
  that rely on whether an element is so designated) whether or not the user can modify the <a href=#concept-fe-value id=mutability:concept-fe-value>value</a> or <a href=#concept-fe-checked id=mutability:concept-fe-checked>checkedness</a> of a
  form control, or whether or not a control can be automatically prefilled.</p>
  


  <h5 id=association-of-controls-and-forms><span class=secno>4.10.18.3</span> Association of controls and forms<a href=#association-of-controls-and-forms class=self-link></a></h5>

  <p>A <a id=association-of-controls-and-forms:form-associated-element href=forms.html#form-associated-element>form-associated element</a> can have a relationship with a <code id=association-of-controls-and-forms:the-form-element><a href=forms.html#the-form-element>form</a></code>
  element, which is called the element's <dfn data-dfn-for="button,fieldset,input,object,output,select,textarea,img,form-associated custom element" id=form-owner data-export="">form
  owner</dfn>. If a <a id=association-of-controls-and-forms:form-associated-element-2 href=forms.html#form-associated-element>form-associated element</a> is not associated with a <code id=association-of-controls-and-forms:the-form-element-2><a href=forms.html#the-form-element>form</a></code>
  element, its <a href=#form-owner id=association-of-controls-and-forms:form-owner>form owner</a> is said to be null.</p>

  <p>A <a id=association-of-controls-and-forms:form-associated-element-3 href=forms.html#form-associated-element>form-associated element</a> has an associated <dfn id=parser-inserted-flag>parser inserted flag</dfn>.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#form title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#form</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#attr-form title="Elements in HTML have attributes; these are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want.">Attributes#attr-form</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>≤4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>≤12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>≤6+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>≤12.1+</span></span></div></div></div><p>A <a id=association-of-controls-and-forms:form-associated-element-4 href=forms.html#form-associated-element>form-associated element</a> is, by default, associated with its nearest ancestor <code id=association-of-controls-and-forms:the-form-element-3><a href=forms.html#the-form-element>form</a></code> element (as described
  below), but, if it is <a href=forms.html#category-listed id=association-of-controls-and-forms:category-listed>listed</a>, may have a <dfn data-dfn-for=button,fieldset,input,object,output,select,textarea id=attr-fae-form data-dfn-type=element-attr><code>form</code></dfn> attribute specified to override this.</p>

  <p class=note>This feature allows authors to work around the lack of support for nested
  <code id=association-of-controls-and-forms:the-form-element-4><a href=forms.html#the-form-element>form</a></code> elements.</p>

  <p>If a <a href=forms.html#category-listed id=association-of-controls-and-forms:category-listed-2>listed</a> <a id=association-of-controls-and-forms:form-associated-element-5 href=forms.html#form-associated-element>form-associated element</a> has a
  <code id=association-of-controls-and-forms:attr-fae-form><a href=#attr-fae-form>form</a></code> attribute specified, then that attribute's value must be
  the <a href=https://dom.spec.whatwg.org/#concept-id id=association-of-controls-and-forms:concept-id data-x-internal=concept-id>ID</a> of a <code id=association-of-controls-and-forms:the-form-element-5><a href=forms.html#the-form-element>form</a></code> element in the element's
  <a id=association-of-controls-and-forms:tree href=https://dom.spec.whatwg.org/#concept-tree data-x-internal=tree>tree</a>.</p>

  

  <p class=note>The rules in this section are complicated by the fact that although conforming
  documents or <a href=https://dom.spec.whatwg.org/#concept-tree id=association-of-controls-and-forms:tree-2 data-x-internal=tree>trees</a> will never contain nested <code id=association-of-controls-and-forms:the-form-element-6><a href=forms.html#the-form-element>form</a></code>
  elements, it is quite possible (e.g., using a script that performs DOM manipulation) to generate
  <a href=https://dom.spec.whatwg.org/#concept-tree id=association-of-controls-and-forms:tree-3 data-x-internal=tree>trees</a> that have such nested elements. They are also complicated by
  rules in the HTML parser that, for historical reasons, can result in a <a id=association-of-controls-and-forms:form-associated-element-6 href=forms.html#form-associated-element>form-associated
  element</a> being associated with a <code id=association-of-controls-and-forms:the-form-element-7><a href=forms.html#the-form-element>form</a></code> element that is not its ancestor.</p>

  <p>When a <a id=association-of-controls-and-forms:form-associated-element-7 href=forms.html#form-associated-element>form-associated element</a> is created, its <a href=#form-owner id=association-of-controls-and-forms:form-owner-2>form owner</a> must be
  initialized to null (no owner).</p>

  <p>When a <a id=association-of-controls-and-forms:form-associated-element-8 href=forms.html#form-associated-element>form-associated element</a> is to be <dfn id=concept-form-association>associated</dfn> with a form, its <a href=#form-owner id=association-of-controls-and-forms:form-owner-3>form owner</a> must
  be set to that form.</p>

  <p>When a <a href=forms.html#category-listed id=association-of-controls-and-forms:category-listed-3>listed</a> <a id=association-of-controls-and-forms:form-associated-element-9 href=forms.html#form-associated-element>form-associated element</a>'s
  <code id=association-of-controls-and-forms:attr-fae-form-2><a href=#attr-fae-form>form</a></code> attribute is set, changed, or removed, then the user
  agent must <a href=#reset-the-form-owner id=association-of-controls-and-forms:reset-the-form-owner>reset the form owner</a> of that element.</p>

  <p>When a <a href=forms.html#category-listed id=association-of-controls-and-forms:category-listed-4>listed</a> <a id=association-of-controls-and-forms:form-associated-element-10 href=forms.html#form-associated-element>form-associated element</a> has a
  <code id=association-of-controls-and-forms:attr-fae-form-3><a href=#attr-fae-form>form</a></code> attribute and the <a href=https://dom.spec.whatwg.org/#concept-id id=association-of-controls-and-forms:concept-id-2 data-x-internal=concept-id>ID</a> of
  any of the elements in the <a id=association-of-controls-and-forms:tree-4 href=https://dom.spec.whatwg.org/#concept-tree data-x-internal=tree>tree</a> changes, then the user agent must <a href=#reset-the-form-owner id=association-of-controls-and-forms:reset-the-form-owner-2>reset the
  form owner</a> of that <a id=association-of-controls-and-forms:form-associated-element-11 href=forms.html#form-associated-element>form-associated element</a>.</p>

  <p>When a <a href=forms.html#category-listed id=association-of-controls-and-forms:category-listed-5>listed</a> <a id=association-of-controls-and-forms:form-associated-element-12 href=forms.html#form-associated-element>form-associated element</a> has a
  <code id=association-of-controls-and-forms:attr-fae-form-4><a href=#attr-fae-form>form</a></code> attribute and an element with an <a href=https://dom.spec.whatwg.org/#concept-id id=association-of-controls-and-forms:concept-id-3 data-x-internal=concept-id>ID</a> is <a href=infrastructure.html#insert-an-element-into-a-document id=association-of-controls-and-forms:insert-an-element-into-a-document>inserted
  into</a> or <a href=infrastructure.html#remove-an-element-from-a-document id=association-of-controls-and-forms:remove-an-element-from-a-document>removed from</a> the
  <code id=association-of-controls-and-forms:document><a href=dom.html#document>Document</a></code>, or its <a id=association-of-controls-and-forms:html-element-moving-steps href=infrastructure.html#html-element-moving-steps>HTML element moving steps</a> are run, then the user agent
  must <a href=#reset-the-form-owner id=association-of-controls-and-forms:reset-the-form-owner-3>reset the form owner</a> of that <a id=association-of-controls-and-forms:form-associated-element-13 href=forms.html#form-associated-element>form-associated element</a>.</p>

  <p class=note>The form owner is also reset by the <a id=association-of-controls-and-forms:html-element-insertion-steps href=infrastructure.html#html-element-insertion-steps>HTML element insertion steps</a>,
  <a id=association-of-controls-and-forms:html-element-removing-steps href=infrastructure.html#html-element-removing-steps>HTML element removing steps</a>, and <a id=association-of-controls-and-forms:html-element-moving-steps-2 href=infrastructure.html#html-element-moving-steps>HTML element moving steps</a>.</p>

  <p>To <dfn id=reset-the-form-owner>reset the form owner</dfn> of a <a id=association-of-controls-and-forms:form-associated-element-14 href=forms.html#form-associated-element>form-associated element</a>
  <var>element</var>:</p>

  <ol><li><p>Unset <var>element</var>'s <a href=#parser-inserted-flag id=association-of-controls-and-forms:parser-inserted-flag>parser inserted flag</a>.<li>
    <p>If all of the following are true:</p>

    <ul><li><p><var>element</var>'s <a href=#form-owner id=association-of-controls-and-forms:form-owner-4>form owner</a> is not null;<li><p><var>element</var> is not <a href=forms.html#category-listed id=association-of-controls-and-forms:category-listed-6>listed</a> or its <code id=association-of-controls-and-forms:attr-fae-form-5><a href=#attr-fae-form>form</a></code> content attribute is not present; and<li><p><var>element</var>'s <a href=#form-owner id=association-of-controls-and-forms:form-owner-5>form owner</a> is its nearest <code id=association-of-controls-and-forms:the-form-element-8><a href=forms.html#the-form-element>form</a></code> element
     ancestor after the change to the ancestor chain,</ul>

    <p>then return.</p>
   <li><p>Set <var>element</var>'s <a href=#form-owner id=association-of-controls-and-forms:form-owner-6>form owner</a> to null.<li>
    <p>If <var>element</var> is <a href=forms.html#category-listed id=association-of-controls-and-forms:category-listed-7>listed</a>, has a <code id=association-of-controls-and-forms:attr-fae-form-6><a href=#attr-fae-form>form</a></code> content attribute, and is <a id=association-of-controls-and-forms:connected href=https://dom.spec.whatwg.org/#connected data-x-internal=connected>connected</a>, then:</p>

    <ol><li><p>If the first element in <var>element</var>'s <a id=association-of-controls-and-forms:tree-5 href=https://dom.spec.whatwg.org/#concept-tree data-x-internal=tree>tree</a>, in <a id=association-of-controls-and-forms:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree
     order</a>, to have an <a href=https://dom.spec.whatwg.org/#concept-id id=association-of-controls-and-forms:concept-id-4 data-x-internal=concept-id>ID</a> that is <a id=association-of-controls-and-forms:identical-to href=https://infra.spec.whatwg.org/#string-is data-x-internal=identical-to>identical to</a>
     <var>element</var>'s <code id=association-of-controls-and-forms:attr-fae-form-7><a href=#attr-fae-form>form</a></code> content attribute's value, is a
     <code id=association-of-controls-and-forms:the-form-element-9><a href=forms.html#the-form-element>form</a></code> element, then <a href=#concept-form-association id=association-of-controls-and-forms:concept-form-association>associate</a> the
     <var>element</var> with that <code id=association-of-controls-and-forms:the-form-element-10><a href=forms.html#the-form-element>form</a></code> element.</ol>
   <li><p>Otherwise, if <var>element</var> has an ancestor <code id=association-of-controls-and-forms:the-form-element-11><a href=forms.html#the-form-element>form</a></code> element, then <a href=#concept-form-association id=association-of-controls-and-forms:concept-form-association-2>associate</a> <var>element</var> with the nearest such
   ancestor <code id=association-of-controls-and-forms:the-form-element-12><a href=forms.html#the-form-element>form</a></code> element.</ol>

  <div class=example>

   <p>In the following non-conforming snippet</p>

   <pre class=bad><code class='html'>...
 <c- p>&lt;</c-><c- f>form</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;a&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;b&quot;</c-><c- p>&gt;&lt;/</c-><c- f>div</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
  document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;b&apos;</c-><c- p>).</c->innerHTML <c- o>=</c->
     <c- t>&apos;&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;/form&gt;&lt;form id=&quot;c&quot;&gt;&lt;input id=&quot;d&quot;&gt;&lt;/table&gt;&apos;</c-> <c- o>+</c->
     <c- t>&apos;&lt;input id=&quot;e&quot;&gt;&apos;</c-><c- p>;</c->
 <c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
...</code></pre>

   <p>the <a href=#form-owner id=association-of-controls-and-forms:form-owner-7>form owner</a> of "d" would be the inner nested form "c", while the <a href=#form-owner id=association-of-controls-and-forms:form-owner-8>form
   owner</a> of "e" would be the outer form "a".</p>

   <p>This happens as follows: First, the "e" node gets associated with "c" in the <a id=association-of-controls-and-forms:html-parser href=parsing.html#html-parser>HTML
   parser</a>. Then, the <code id=association-of-controls-and-forms:dom-element-innerhtml><a href=dynamic-markup-insertion.html#dom-element-innerhtml>innerHTML</a></code> algorithm moves the nodes
   from the temporary document to the "b" element. At this point, the nodes see their ancestor chain
   change, and thus all the "magic" associations done by the parser are reset to normal ancestor
   associations.</p>

   <p>This example is a non-conforming document, though, as it is a violation of the content models
   to nest <code id=association-of-controls-and-forms:the-form-element-13><a href=forms.html#the-form-element>form</a></code> elements, and there is a <a id=association-of-controls-and-forms:parse-errors href=parsing.html#parse-errors>parse error</a> for the <code>&lt;/form></code> tag.</p>

  </div>

  

  <dl class=domintro><dt><code><var>element</var>.<a href=#dom-fae-form id=dom-fae-form-dev>form</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/form title="The form read-only property of the HTMLObjectElement interface returns a HTMLFormElement representing the object element's form owner, or null if there isn't one.">HTMLObjectElement/form</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/form title="The HTMLSelectElement.form read-only property returns a HTMLFormElement representing the form that this element is associated with. If the element is not associated with a <form> element, then it returns null.">HTMLSelectElement/form</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the element's <a href=#form-owner id=association-of-controls-and-forms:form-owner-9>form owner</a>.</p>

    <p>Returns null if there isn't one.</p>
   </dl>

  

  <p><a href=forms.html#category-listed id=association-of-controls-and-forms:category-listed-8>Listed</a> <a href=forms.html#form-associated-element id=association-of-controls-and-forms:form-associated-element-15>form-associated elements</a> except for <a href=custom-elements.html#form-associated-custom-element id=association-of-controls-and-forms:form-associated-custom-element>form-associated custom elements</a> have a <dfn data-dfn-for=HTMLObjectElement,HTMLInputElement,HTMLButtonElement,HTMLSelectElement,HTMLTextAreaElement,HTMLOutputElement,HTMLFieldSetElement id=dom-fae-form data-dfn-type=attribute><code>form</code></dfn> IDL attribute, which, on getting, must return the
  element's <a href=#form-owner id=association-of-controls-and-forms:form-owner-10>form owner</a>, or null if there isn't one.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form title="The form read-only property of the ElementInternals interface returns the HTMLFormElement associated with this element.">ElementInternals/form</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>98+</span></span><span class="safari yes"><span>Safari</span><span>16.4+</span></span><span class="chrome yes"><span>Chrome</span><span>77+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p><a href=custom-elements.html#form-associated-custom-element id=association-of-controls-and-forms:form-associated-custom-element-2>Form-associated custom elements</a> don't have
  <code id=association-of-controls-and-forms:dom-fae-form><a href=#dom-fae-form>form</a></code> IDL attribute. Instead, their
  <code id=association-of-controls-and-forms:elementinternals><a href=custom-elements.html#elementinternals>ElementInternals</a></code> object has a <dfn data-dfn-for=ElementInternals id=dom-elementinternals-form data-dfn-type=attribute><code>form</code></dfn> IDL attribute. On getting, it must throw a
  <a id=association-of-controls-and-forms:notsupportederror href=https://webidl.spec.whatwg.org/#notsupportederror data-x-internal=notsupportederror>"<code>NotSupportedError</code>"</a> <code id=association-of-controls-and-forms:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the <a href=custom-elements.html#internals-target id=association-of-controls-and-forms:internals-target>target element</a> is not a <a id=association-of-controls-and-forms:form-associated-custom-element-3 href=custom-elements.html#form-associated-custom-element>form-associated custom
  element</a>. Otherwise, it must return the element's <a href=#form-owner id=association-of-controls-and-forms:form-owner-11>form owner</a>, or null if there
  isn't one.</p>

  



  <h4 id=attributes-common-to-form-controls><span class=secno>4.10.19</span> Attributes common to form controls<a href=#attributes-common-to-form-controls class=self-link></a></h4>

  <h5 id=naming-form-controls:-the-name-attribute><span class=secno>4.10.19.1</span> Naming form controls: the <code id=naming-form-controls:-the-name-attribute:attr-fe-name><a href=#attr-fe-name>name</a></code> attribute<a href=#naming-form-controls:-the-name-attribute class=self-link></a></h5>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#name</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=button,fieldset,input,output,select,textarea id=attr-fe-name data-dfn-type=element-attr><code>name</code></dfn> content attribute gives the name of the form control, as
  used in <a href=#form-submission-2 id=naming-form-controls:-the-name-attribute:form-submission-2>form submission</a> and in the <code id=naming-form-controls:-the-name-attribute:the-form-element><a href=forms.html#the-form-element>form</a></code> element's <code id=naming-form-controls:-the-name-attribute:dom-form-elements><a href=forms.html#dom-form-elements>elements</a></code> object. If the attribute is specified, its value must
  not be the empty string or <code>isindex</code>.</p>

  <p class=note>A number of user agents historically implemented special support for first-in-form
  text controls with the name <code>isindex</code>, and this specification previously
  defined related user agent requirements for it. However, some user agents subsequently dropped
  that special support, and the related requirements were removed from this specification. So, to
  avoid problematic reinterpretations in legacy user agents, the name <code>isindex</code>
  is no longer allowed.</p>

  <p>Other than <code>isindex</code>, any non-empty value for <code id=naming-form-controls:-the-name-attribute:attr-form-name><a href=forms.html#attr-form-name>name</a></code> is allowed. An <a id=naming-form-controls:-the-name-attribute:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for
  the name <dfn id=attr-fe-name-charset><code>_charset_</code></dfn> is special: if used as
  the name of a <a href="input.html#hidden-state-(type=hidden)" id="naming-form-controls:-the-name-attribute:hidden-state-(type=hidden)">Hidden</a> control with no <code id=naming-form-controls:-the-name-attribute:attr-input-value><a href=input.html#attr-input-value>value</a></code> attribute, then during submission the <code id=naming-form-controls:-the-name-attribute:attr-input-value-2><a href=input.html#attr-input-value>value</a></code> attribute is automatically given a value consisting of the
  submission character encoding.</p>

  <div class=note>
   <p>DOM clobbering is a common cause of security issues. Avoid using the names of
   built-in form properties with the <code id=naming-form-controls:-the-name-attribute:attr-fe-name-2><a href=#attr-fe-name>name</a></code> content attribute.</p>

   <p>In this example, the <code id=naming-form-controls:-the-name-attribute:the-input-element><a href=input.html#the-input-element>input</a></code> element overrides the built-in <code id=naming-form-controls:-the-name-attribute:attr-fs-method><a href=#attr-fs-method>method</a></code> property:</p>

   <pre><code class='js'><c- a>let</c-> form <c- o>=</c-> document<c- p>.</c->createElement<c- p>(</c-><c- u>&quot;form&quot;</c-><c- p>);</c->
<c- a>let</c-> input <c- o>=</c-> document<c- p>.</c->createElement<c- p>(</c-><c- u>&quot;input&quot;</c-><c- p>);</c->
form<c- p>.</c->appendChild<c- p>(</c->input<c- p>);</c->

form<c- p>.</c->method<c- p>;</c->           <c- c1>// =&gt; &quot;get&quot;</c->
input<c- p>.</c->name <c- o>=</c-> <c- u>&quot;method&quot;</c-><c- p>;</c-> <c- c1>// DOM clobbering occurs here</c->
form<c- p>.</c->method <c- o>===</c-> input<c- p>;</c-> <c- c1>// =&gt; true</c-></code></pre>

   <p>Since the input name takes precedence over built-in form properties, the JavaScript reference
   <code>form.method</code> will point to the <code id=naming-form-controls:-the-name-attribute:the-input-element-2><a href=input.html#the-input-element>input</a></code> element named "method"
   instead of the built-in <code id=naming-form-controls:-the-name-attribute:attr-fs-method-2><a href=#attr-fs-method>method</a></code> property.</p>
  </div>


  <h5 id=submitting-element-directionality:-the-dirname-attribute><span class=secno>4.10.19.2</span> Submitting element directionality: the <code id=submitting-element-directionality:-the-dirname-attribute:attr-fe-dirname><a href=#attr-fe-dirname>dirname</a></code> attribute<a href=#submitting-element-directionality:-the-dirname-attribute class=self-link></a></h5>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#dirname title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#dirname</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>116+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>17+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=input,textarea id=attr-fe-dirname data-dfn-type=element-attr><code>dirname</code></dfn>
  attribute on a form control element enables the submission of <a id=submitting-element-directionality:-the-dirname-attribute:the-directionality href=dom.html#the-directionality>the directionality</a> of
  the element, and gives the name of the control that contains this value during <a href=#form-submission-2 id=submitting-element-directionality:-the-dirname-attribute:form-submission-2>form
  submission</a>. If such an attribute is specified, its value must not be the empty string.</p>

  <div class=example>

   <p>In this example, a form contains a text control and a submission button:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;addcomment.cgi&quot;</c-> <c- e>method</c-><c- o>=</c-><c- s>post</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Comment: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>text</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;comment&quot;</c-> <c- e>dirname</c-><c- o>=</c-><c- s>&quot;comment.dir&quot;</c-> <c- e>required</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>button</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;mode&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;add&quot;</c-><c- p>&gt;</c->Post Comment<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

   <p>When the user submits the form, the user agent includes three fields, one called "comment",
   one called "comment.dir", and one called "mode"; so if the user types "Hello", the submission
   body might be something like:</p>

   <pre>comment=Hello&amp;<strong>comment.dir=ltr</strong>&amp;mode=add</pre>

   <p>If the user manually switches to a right-to-left writing direction and enters "<span dir=rtl lang=ar>مرحبا</span>", the submission body might be
   something like:</p>

   <pre>comment=%D9%85%D8%B1%D8%AD%D8%A8%D8%A7&amp;<strong>comment.dir=rtl</strong>&amp;mode=add</pre>

  </div>


  <h5 id=limiting-user-input-length:-the-maxlength-attribute><span class=secno>4.10.19.3</span> Limiting user input length: the <code id=limiting-user-input-length:-the-maxlength-attribute:attr-fe-maxlength><a href=#attr-fe-maxlength>maxlength</a></code> attribute<a href=#limiting-user-input-length:-the-maxlength-attribute class=self-link></a></h5>

  <p>A <dfn data-dfn-for=input,textarea id=attr-fe-maxlength data-dfn-type=element-attr data-lt=maxlength>form
  control <code>maxlength</code> attribute</dfn>, controlled by the <a href=#concept-fe-dirty id=limiting-user-input-length:-the-maxlength-attribute:concept-fe-dirty>dirty value flag</a>, declares a limit on the number of characters a
  user can input. The number of characters is measured using <a id=limiting-user-input-length:-the-maxlength-attribute:length href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> and, in the case
  of <code id=limiting-user-input-length:-the-maxlength-attribute:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code> elements, with all newlines normalized to a single character (as opposed
  to CRLF pairs).</p>

  <p>If an element has its <a href=#attr-fe-maxlength id=limiting-user-input-length:-the-maxlength-attribute:attr-fe-maxlength-2>form control <code>maxlength</code> attribute</a> specified, the attribute's value must be a <a id=limiting-user-input-length:-the-maxlength-attribute:valid-non-negative-integer href=common-microsyntaxes.html#valid-non-negative-integer>valid
  non-negative integer</a>. If the attribute is specified and applying the <a id=limiting-user-input-length:-the-maxlength-attribute:rules-for-parsing-non-negative-integers href=common-microsyntaxes.html#rules-for-parsing-non-negative-integers>rules for
  parsing non-negative integers</a> to its value results in a number, then that number is the
  element's <dfn id=maximum-allowed-value-length>maximum allowed value length</dfn>. If the attribute is omitted or parsing its
  value results in an error, then there is no <a href=#maximum-allowed-value-length id=limiting-user-input-length:-the-maxlength-attribute:maximum-allowed-value-length>maximum allowed value length</a>.</p>

  

  <p><strong>Constraint validation</strong>: If an element has a <a href=#maximum-allowed-value-length id=limiting-user-input-length:-the-maxlength-attribute:maximum-allowed-value-length-2>maximum allowed value
  length</a>, its <a href=#concept-fe-dirty id=limiting-user-input-length:-the-maxlength-attribute:concept-fe-dirty-2>dirty value flag</a> is true, its <a href=#concept-fe-value id=limiting-user-input-length:-the-maxlength-attribute:concept-fe-value>value</a> was last changed by a user edit (as opposed to a change
  made by a script), and the <a id=limiting-user-input-length:-the-maxlength-attribute:length-2 href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> of the element's <a href=#concept-fe-api-value id=limiting-user-input-length:-the-maxlength-attribute:concept-fe-api-value>API value</a> is greater than the element's <a href=#maximum-allowed-value-length id=limiting-user-input-length:-the-maxlength-attribute:maximum-allowed-value-length-3>maximum allowed
  value length</a>, then the element is <a href=#suffering-from-being-too-long id=limiting-user-input-length:-the-maxlength-attribute:suffering-from-being-too-long>suffering from being too long</a>.</p>

  <p>User agents may prevent the user from causing the element's <a href=#concept-fe-api-value id=limiting-user-input-length:-the-maxlength-attribute:concept-fe-api-value-2>API value</a> to be set to a value whose <a id=limiting-user-input-length:-the-maxlength-attribute:length-3 href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> is
  greater than the element's <a href=#maximum-allowed-value-length id=limiting-user-input-length:-the-maxlength-attribute:maximum-allowed-value-length-4>maximum allowed value length</a>.</p>

  <p class=note>In the case of <code id=limiting-user-input-length:-the-maxlength-attribute:the-textarea-element-2><a href=form-elements.html#the-textarea-element>textarea</a></code> elements, the <a href=#concept-fe-api-value id=limiting-user-input-length:-the-maxlength-attribute:concept-fe-api-value-3>API value</a> and <a href=#concept-fe-value id=limiting-user-input-length:-the-maxlength-attribute:concept-fe-value-2>value</a>
  differ. In particular, <a href=https://infra.spec.whatwg.org/#normalize-newlines id=limiting-user-input-length:-the-maxlength-attribute:normalize-newlines data-x-internal=normalize-newlines>newline normalization</a> is applied
  before the <a href=#maximum-allowed-value-length id=limiting-user-input-length:-the-maxlength-attribute:maximum-allowed-value-length-5>maximum allowed value length</a> is checked (whereas the <a id=limiting-user-input-length:-the-maxlength-attribute:textarea-wrapping-transformation href=form-elements.html#textarea-wrapping-transformation>textarea
  wrapping transformation</a> is not applied).</p>

  


  <h5 id=setting-minimum-input-length-requirements:-the-minlength-attribute><span class=secno>4.10.19.4</span> Setting minimum input length requirements: the <code id=setting-minimum-input-length-requirements:-the-minlength-attribute:attr-fe-minlength><a href=#attr-fe-minlength>minlength</a></code> attribute<a href=#setting-minimum-input-length-requirements:-the-minlength-attribute class=self-link></a></h5>

  <p>A <dfn data-dfn-for=input,textarea id=attr-fe-minlength data-dfn-type=element-attr data-lt=minlength>form
  control <code>minlength</code> attribute</dfn>, controlled by the <a href=#concept-fe-dirty id=setting-minimum-input-length-requirements:-the-minlength-attribute:concept-fe-dirty>dirty value flag</a>, declares a lower bound on the number of
  characters a user can input. The "number of characters" is measured using <a id=setting-minimum-input-length-requirements:-the-minlength-attribute:length href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> and,
  in the case of <code id=setting-minimum-input-length-requirements:-the-minlength-attribute:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code> elements, with all newlines normalized to a single character
  (as opposed to CRLF pairs).</p>

  <p class=note>The <code id=setting-minimum-input-length-requirements:-the-minlength-attribute:attr-fe-minlength-2><a href=#attr-fe-minlength>minlength</a></code> attribute does not imply the
  <code>required</code> attribute. If the form control has no <code>required</code> attribute, then the value can still be omitted; the <code id=setting-minimum-input-length-requirements:-the-minlength-attribute:attr-fe-minlength-3><a href=#attr-fe-minlength>minlength</a></code> attribute only kicks in once the user has entered a
  value at all. If the empty string is not allowed, then the <code>required</code>
  attribute also needs to be set.</p>

  <p>If an element has its <a href=#attr-fe-minlength id=setting-minimum-input-length-requirements:-the-minlength-attribute:attr-fe-minlength-4>form control <code>minlength</code> attribute</a> specified, the attribute's value must be a <a id=setting-minimum-input-length-requirements:-the-minlength-attribute:valid-non-negative-integer href=common-microsyntaxes.html#valid-non-negative-integer>valid
  non-negative integer</a>. If the attribute is specified and applying the <a id=setting-minimum-input-length-requirements:-the-minlength-attribute:rules-for-parsing-non-negative-integers href=common-microsyntaxes.html#rules-for-parsing-non-negative-integers>rules for
  parsing non-negative integers</a> to its value results in a number, then that number is the
  element's <dfn id=minimum-allowed-value-length>minimum allowed value length</dfn>. If the attribute is omitted or parsing its
  value results in an error, then there is no <a href=#minimum-allowed-value-length id=setting-minimum-input-length-requirements:-the-minlength-attribute:minimum-allowed-value-length>minimum allowed value length</a>.</p>

  <p>If an element has both a <a href=#maximum-allowed-value-length id=setting-minimum-input-length-requirements:-the-minlength-attribute:maximum-allowed-value-length>maximum allowed value length</a> and a <a href=#minimum-allowed-value-length id=setting-minimum-input-length-requirements:-the-minlength-attribute:minimum-allowed-value-length-2>minimum allowed
  value length</a>, the <a href=#minimum-allowed-value-length id=setting-minimum-input-length-requirements:-the-minlength-attribute:minimum-allowed-value-length-3>minimum allowed value length</a> must be smaller than or equal
  to the <a href=#maximum-allowed-value-length id=setting-minimum-input-length-requirements:-the-minlength-attribute:maximum-allowed-value-length-2>maximum allowed value length</a>.</p>

  

  <p><strong>Constraint validation</strong>: If an element has a <a href=#minimum-allowed-value-length id=setting-minimum-input-length-requirements:-the-minlength-attribute:minimum-allowed-value-length-4>minimum allowed value
  length</a>, its <a href=#concept-fe-dirty id=setting-minimum-input-length-requirements:-the-minlength-attribute:concept-fe-dirty-2>dirty value flag</a> is true, its <a href=#concept-fe-value id=setting-minimum-input-length-requirements:-the-minlength-attribute:concept-fe-value>value</a> was last changed by a user edit (as opposed to a change
  made by a script), its <a href=#concept-fe-value id=setting-minimum-input-length-requirements:-the-minlength-attribute:concept-fe-value-2>value</a> is not the empty string, and
  the <a id=setting-minimum-input-length-requirements:-the-minlength-attribute:length-2 href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> of the element's <a href=#concept-fe-api-value id=setting-minimum-input-length-requirements:-the-minlength-attribute:concept-fe-api-value>API value</a> is
  less than the element's <a href=#minimum-allowed-value-length id=setting-minimum-input-length-requirements:-the-minlength-attribute:minimum-allowed-value-length-5>minimum allowed value length</a>, then the element is
  <a href=#suffering-from-being-too-short id=setting-minimum-input-length-requirements:-the-minlength-attribute:suffering-from-being-too-short>suffering from being too short</a>.</p>

  

  <div class=example>

   <p>In this example, there are four text controls. The first is required, and has to be at least 5
   characters long. The other three are optional, but if the user fills one in, the user has to
   enter at least 10 characters.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;/events/menu.cgi&quot;</c-> <c- e>method</c-><c- o>=</c-><c- s>&quot;post&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Name of Event: <c- p>&lt;</c-><c- f>input</c-> <c- e>required</c-> <c- e>minlength</c-><c- o>=</c-><c- s>5</c-> <c- e>maxlength</c-><c- o>=</c-><c- s>50</c-> <c- e>name</c-><c- o>=</c-><c- s>event</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Describe what you would like for breakfast, if anything:
    <c- p>&lt;</c-><c- f>textarea</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;breakfast&quot;</c-> <c- e>minlength</c-><c- o>=</c-><c- s>&quot;10&quot;</c-><c- p>&gt;&lt;/</c-><c- f>textarea</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Describe what you would like for lunch, if anything:
    <c- p>&lt;</c-><c- f>textarea</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;lunch&quot;</c-> <c- e>minlength</c-><c- o>=</c-><c- s>&quot;10&quot;</c-><c- p>&gt;&lt;/</c-><c- f>textarea</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Describe what you would like for dinner, if anything:
    <c- p>&lt;</c-><c- f>textarea</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;dinner&quot;</c-> <c- e>minlength</c-><c- o>=</c-><c- s>&quot;10&quot;</c-><c- p>&gt;&lt;/</c-><c- f>textarea</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Submit Request&quot;</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>


  </div>


  <h5 id=enabling-and-disabling-form-controls:-the-disabled-attribute><span class=secno>4.10.19.5</span> Enabling and disabling form controls: the <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code> attribute<a href=#enabling-and-disabling-form-controls:-the-disabled-attribute class=self-link></a></h5>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled title="The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.">Attributes/disabled</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled title="The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.">Attributes/disabled</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>20+</span></span><hr><span class="opera yes"><span>Opera</span><span>12+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled title="The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.">Attributes/disabled</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled title="The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.">Attributes/disabled</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled title="The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.">Attributes/disabled</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>6+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=button,fieldset,input,object,output,select,textarea id=attr-fe-disabled data-dfn-type=element-attr><code>disabled</code></dfn> content attribute is a <a id=enabling-and-disabling-form-controls:-the-disabled-attribute:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean
  attribute</a>.</p>

  <p class=note>The <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:attr-option-disabled><a href=form-elements.html#attr-option-disabled>disabled</a></code> attribute for
  <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:the-option-element><a href=form-elements.html#the-option-element>option</a></code> elements and the <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:attr-optgroup-disabled><a href=form-elements.html#attr-optgroup-disabled>disabled</a></code>
  attribute for <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:the-optgroup-element><a href=form-elements.html#the-optgroup-element>optgroup</a></code> elements are defined separately.</p>

  <p>A form control is <dfn id=concept-fe-disabled>disabled</dfn> if any of the following are
  true:</p>

  <ul><li><p>the element is a <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:the-button-element><a href=form-elements.html#the-button-element>button</a></code>, <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:the-input-element><a href=input.html#the-input-element>input</a></code>, <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:the-select-element><a href=form-elements.html#the-select-element>select</a></code>,
   <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code>, or <a id=enabling-and-disabling-form-controls:-the-disabled-attribute:form-associated-custom-element href=custom-elements.html#form-associated-custom-element>form-associated custom element</a>, and the <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:attr-fe-disabled-2><a href=#attr-fe-disabled>disabled</a></code> attribute is specified on this element (regardless of
   its value); or<li><p>the element is a descendant of a <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:the-fieldset-element><a href=form-elements.html#the-fieldset-element>fieldset</a></code> element whose <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:attr-fieldset-disabled><a href=form-elements.html#attr-fieldset-disabled>disabled</a></code> attribute is specified, and is <em>not</em> a
   descendant of that <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:the-fieldset-element-2><a href=form-elements.html#the-fieldset-element>fieldset</a></code> element's first <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:the-legend-element><a href=form-elements.html#the-legend-element>legend</a></code> element child, if
   any.</ul>

  

  <p>A form control that is <a href=#concept-fe-disabled id=enabling-and-disabling-form-controls:-the-disabled-attribute:concept-fe-disabled>disabled</a> must prevent any
  <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:event-click><a data-x-internal=event-click href=https://w3c.github.io/uievents/#event-type-click>click</a></code> events that are <a href=webappapis.html#queue-a-task id=enabling-and-disabling-form-controls:-the-disabled-attribute:queue-a-task>queued</a>
  on the <a id=enabling-and-disabling-form-controls:-the-disabled-attribute:user-interaction-task-source href=webappapis.html#user-interaction-task-source>user interaction task source</a> from being dispatched on the element.</p>

  

  <p class=note>Being <a href=#concept-fe-disabled id=enabling-and-disabling-form-controls:-the-disabled-attribute:concept-fe-disabled-2>disabled</a> does not prevent all
  modifications to the form control. For example, the control's <a href=#concept-fe-value id=enabling-and-disabling-form-controls:-the-disabled-attribute:concept-fe-value>value</a> or <a href=#concept-fe-checked id=enabling-and-disabling-form-controls:-the-disabled-attribute:concept-fe-checked>checkedness</a>
  could be modified programmatically from JavaScript. Or, they could be indirectly modified by user
  action, e.g., if other non-disabled elements in the control's <a id=enabling-and-disabling-form-controls:-the-disabled-attribute:radio-button-group href=input.html#radio-button-group>radio button group</a> were
  modified.</p>

  

  <p><strong>Constraint validation</strong>: If an element is <a href=#concept-fe-disabled id=enabling-and-disabling-form-controls:-the-disabled-attribute:concept-fe-disabled-3>disabled</a>, it is <a href=#barred-from-constraint-validation id=enabling-and-disabling-form-controls:-the-disabled-attribute:barred-from-constraint-validation>barred from constraint
  validation</a>.</p>

  


  <h5 id=form-submission-attributes><span class=secno>4.10.19.6</span> Form submission attributes<a href=#form-submission-attributes class=self-link></a></h5>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#Attributes_for_form_submission title="The <form> HTML element represents a document section containing interactive controls for submitting information.">Element/form#Attributes_for_form_submission</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>10.1+</span></span><span class="chrome yes"><span>Chrome</span><span>10+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p><dfn id=attributes-for-form-submission>Attributes for form submission</dfn> can be specified both on <code id=form-submission-attributes:the-form-element><a href=forms.html#the-form-element>form</a></code> elements
  and on <a href=forms.html#concept-submit-button id=form-submission-attributes:concept-submit-button>submit buttons</a> (elements that represent buttons
  that submit forms, e.g. an <code id=form-submission-attributes:the-input-element><a href=input.html#the-input-element>input</a></code> element whose <code id=form-submission-attributes:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#submit-button-state-(type=submit)" id="form-submission-attributes:submit-button-state-(type=submit)">Submit Button</a> state).

  <p>The <a href=#attributes-for-form-submission id=form-submission-attributes:attributes-for-form-submission>attributes for form submission</a> that may be specified on <code id=form-submission-attributes:the-form-element-2><a href=forms.html#the-form-element>form</a></code>
  elements are <code id=form-submission-attributes:attr-fs-action><a href=#attr-fs-action>action</a></code>, <code id=form-submission-attributes:attr-fs-enctype><a href=#attr-fs-enctype>enctype</a></code>, <code id=form-submission-attributes:attr-fs-method><a href=#attr-fs-method>method</a></code>, <code id=form-submission-attributes:attr-fs-novalidate><a href=#attr-fs-novalidate>novalidate</a></code>, and <code id=form-submission-attributes:attr-fs-target><a href=#attr-fs-target>target</a></code>.</p>

  <p>The corresponding <a href=#attributes-for-form-submission id=form-submission-attributes:attributes-for-form-submission-2>attributes for form submission</a> that may be specified on <a href=forms.html#concept-submit-button id=form-submission-attributes:concept-submit-button-2>submit buttons</a> are <code id=form-submission-attributes:attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>, <code id=form-submission-attributes:attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>, <code id=form-submission-attributes:attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>, <code id=form-submission-attributes:attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>, and <code id=form-submission-attributes:attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>. When omitted, they default to the values given on
  the corresponding attributes on the <code id=form-submission-attributes:the-form-element-3><a href=forms.html#the-form-element>form</a></code> element.</p>

  <hr>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formaction title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#formaction</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>9+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>3+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=form,button id=attr-fs-action data-dfn-type=element-attr><code>action</code></dfn> and
  <dfn data-dfn-for=form,button id=attr-fs-formaction data-dfn-type=element-attr><code>formaction</code></dfn>
  content attributes, if specified, must have a value that is a <a id=form-submission-attributes:valid-non-empty-url-potentially-surrounded-by-spaces href=urls-and-fetching.html#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL
  potentially surrounded by spaces</a>.</p>

  <p>The <dfn id=concept-fs-action>action</dfn> of an element is the value of the element's
  <code id=form-submission-attributes:attr-fs-formaction-2><a href=#attr-fs-formaction>formaction</a></code> attribute, if the element is a <a href=forms.html#concept-submit-button id=form-submission-attributes:concept-submit-button-3>submit button</a> and has such an attribute, or the value of its
  <a href=#form-owner id=form-submission-attributes:form-owner>form owner</a>'s <code id=form-submission-attributes:attr-fs-action-2><a href=#attr-fs-action>action</a></code> attribute, if <em>it</em> has
  one, or else the empty string.</p>

  <hr>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formmethod title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#formmethod</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>9+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>3+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=form,button id=attr-fs-method data-dfn-type=element-attr><code>method</code></dfn> and
  <dfn data-dfn-for=form,button id=attr-fs-formmethod data-dfn-type=element-attr><code>formmethod</code></dfn>
  content attributes are <a href=common-microsyntaxes.html#enumerated-attribute id=form-submission-attributes:enumerated-attribute>enumerated attributes</a> with the
  following keywords and states:</p>

  <table><thead><tr><th>Keyword
     <th>State
     <th>Brief description
   <tbody><tr><td><dfn data-dfn-for=form/method,button/formmethod,input/formmethod id=attr-fs-method-get-keyword data-dfn-type=attr-value><code>get</code></dfn>
     <td><dfn id=attr-fs-method-get>GET</dfn>
     <td>Indicates the <code id=form-submission-attributes:the-form-element-4><a href=forms.html#the-form-element>form</a></code> will use the HTTP GET method.
    <tr><td><dfn data-dfn-for=form/method,button/formmethod,input/formmethod id=attr-fs-method-post-keyword data-dfn-type=attr-value><code>post</code></dfn>
     <td><dfn id=attr-fs-method-post>POST</dfn>
     <td>Indicates the <code id=form-submission-attributes:the-form-element-5><a href=forms.html#the-form-element>form</a></code> will use the HTTP POST method.
    <tr><td><dfn data-dfn-for=form/method,button/formmethod,input/formmethod id=attr-fs-method-dialog-keyword data-dfn-type=attr-value><code>dialog</code></dfn>
     <td><dfn id=attr-fs-method-dialog>Dialog</dfn>
     <td>Indicates the <code id=form-submission-attributes:the-form-element-6><a href=forms.html#the-form-element>form</a></code> is intended to close the <code id=form-submission-attributes:the-dialog-element><a href=interactive-elements.html#the-dialog-element>dialog</a></code> box in which
     the form finds itself, if any, and otherwise not submit.
  </table>

  <p>The <code id=form-submission-attributes:attr-fs-method-2><a href=#attr-fs-method>method</a></code> attribute's <i id=form-submission-attributes:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> and <i id=form-submission-attributes:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i>
  are both the <a href=#attr-fs-method-get id=form-submission-attributes:attr-fs-method-get>GET</a> state.</p>

  <p>The <code id=form-submission-attributes:attr-fs-formmethod-2><a href=#attr-fs-formmethod>formmethod</a></code> attribute has no <i id=form-submission-attributes:missing-value-default-2><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i>, and its <i id=form-submission-attributes:invalid-value-default-2><a href=common-microsyntaxes.html#invalid-value-default>invalid value
  default</a></i> is the <a href=#attr-fs-method-get id=form-submission-attributes:attr-fs-method-get-2>GET</a> state.</p>

  <p>The <dfn id=concept-fs-method>method</dfn> of an element is one of those states. If the
  element is a <a href=forms.html#concept-submit-button id=form-submission-attributes:concept-submit-button-4>submit button</a> and has a <code id=form-submission-attributes:attr-fs-formmethod-3><a href=#attr-fs-formmethod>formmethod</a></code> attribute, then the element's <a href=#concept-fs-method id=form-submission-attributes:concept-fs-method>method</a> is that attribute's state; otherwise, it is the <a href=#form-owner id=form-submission-attributes:form-owner-2>form
  owner</a>'s <code id=form-submission-attributes:attr-fs-method-3><a href=#attr-fs-method>method</a></code> attribute's state.</p>

  <div class=example>

   <p>Here the <code id=form-submission-attributes:attr-fs-method-4><a href=#attr-fs-method>method</a></code> attribute is used to explicitly specify
   the default value, "<code id=form-submission-attributes:attr-fs-method-get-keyword><a href=#attr-fs-method-get-keyword>get</a></code>", so that the search
   query is submitted in the URL:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>method</c-><c- o>=</c-><c- s>&quot;get&quot;</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;/search.cgi&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Search terms: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>search</c-> <c- e>name</c-><c- o>=</c-><c- s>q</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>On the other hand, here the <code id=form-submission-attributes:attr-fs-method-5><a href=#attr-fs-method>method</a></code> attribute is used to
   specify the value "<code id=form-submission-attributes:attr-fs-method-post-keyword><a href=#attr-fs-method-post-keyword>post</a></code>", so that the user's
   message is submitted in the HTTP request's body:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>method</c-><c- o>=</c-><c- s>&quot;post&quot;</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;/post-message.cgi&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Message: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>text</c-> <c- e>name</c-><c- o>=</c-><c- s>m</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Submit message&quot;</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>In this example, a <code id=form-submission-attributes:the-form-element-7><a href=forms.html#the-form-element>form</a></code> is used with a <code id=form-submission-attributes:the-dialog-element-2><a href=interactive-elements.html#the-dialog-element>dialog</a></code>. The <code id=form-submission-attributes:attr-fs-method-6><a href=#attr-fs-method>method</a></code> attribute's "<code id=form-submission-attributes:attr-fs-method-dialog-keyword><a href=#attr-fs-method-dialog-keyword>dialog</a></code>" keyword is used to have the dialog
   automatically close when the form is submitted.</p>

   <pre lang=en-GB><code class='html'><c- p>&lt;</c-><c- f>dialog</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;ship&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>form</c-> <c- e>method</c-><c- o>=</c-><c- s>dialog</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->A ship has arrived in the harbour.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>button</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;board&quot;</c-><c- p>&gt;</c->Board the ship<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>button</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;call&quot;</c-><c- p>&gt;</c->Call to the captain<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>dialog</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- a>var</c-> ship <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;ship&apos;</c-><c- p>);</c->
 ship<c- p>.</c->showModal<c- p>();</c->
 ship<c- p>.</c->onclose <c- o>=</c-> <c- a>function</c-> <c- p>(</c->event<c- p>)</c-> <c- p>{</c->
   <c- k>if</c-> <c- p>(</c->ship<c- p>.</c->returnValue <c- o>==</c-> <c- t>&apos;board&apos;</c-><c- p>)</c-> <c- p>{</c->
     <c- c1>// ...</c->
   <c- p>}</c-> <c- k>else</c-> <c- p>{</c->
     <c- c1>// ...</c->
   <c- p>}</c->
 <c- p>};</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

  </div>

  <hr>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formenctype title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#formenctype</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>9+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>3+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=form,button id=attr-fs-enctype data-dfn-type=element-attr><code>enctype</code></dfn> and
  <dfn data-dfn-for=form,button id=attr-fs-formenctype data-dfn-type=element-attr><code>formenctype</code></dfn>
  content attributes are <a href=common-microsyntaxes.html#enumerated-attribute id=form-submission-attributes:enumerated-attribute-2>enumerated attributes</a> with the
  following keywords and states:</p>

  <ul><li>The "<dfn data-dfn-for=form/enctype,button/enctype id=attr-fs-enctype-urlencoded data-dfn-type=attr-value><code>application/x-www-form-urlencoded</code></dfn>" keyword and
   corresponding state.<li>The "<dfn data-dfn-for=form/enctype,button/enctype id=attr-fs-enctype-formdata data-dfn-type=attr-value><code>multipart/form-data</code></dfn>" keyword and corresponding
   state.<li>The "<dfn data-dfn-for=form/enctype,button/enctype id=attr-fs-enctype-text data-dfn-type=attr-value><code>text/plain</code></dfn>" keyword and corresponding state.</ul>

  <p>The attribute's <i id=form-submission-attributes:missing-value-default-3><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> and <i id=form-submission-attributes:invalid-value-default-3><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> are both the <code id=form-submission-attributes:attr-fs-enctype-urlencoded><a href=#attr-fs-enctype-urlencoded>application/x-www-form-urlencoded</a></code> state.</p>

  <p>The <code id=form-submission-attributes:attr-fs-formenctype-2><a href=#attr-fs-formenctype>formenctype</a></code> attribute has no <i id=form-submission-attributes:missing-value-default-4><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i>, and its <i id=form-submission-attributes:invalid-value-default-4><a href=common-microsyntaxes.html#invalid-value-default>invalid value
  default</a></i> is the <code id=form-submission-attributes:attr-fs-enctype-urlencoded-2><a href=#attr-fs-enctype-urlencoded>application/x-www-form-urlencoded</a></code> state.</p>

  <p>The <dfn id=concept-fs-enctype>enctype</dfn> of an element is one of those three states.
  If the element is a <a href=forms.html#concept-submit-button id=form-submission-attributes:concept-submit-button-5>submit button</a> and has a <code id=form-submission-attributes:attr-fs-formenctype-3><a href=#attr-fs-formenctype>formenctype</a></code> attribute, then the element's <a href=#concept-fs-enctype id=form-submission-attributes:concept-fs-enctype>enctype</a> is that attribute's state; otherwise, it is the
  <a href=#form-owner id=form-submission-attributes:form-owner-3>form owner</a>'s <code id=form-submission-attributes:attr-fs-enctype-2><a href=#attr-fs-enctype>enctype</a></code> attribute's state.</p>

  <hr>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formtarget title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#formtarget</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>9+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>3+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=form,button id=attr-fs-target data-dfn-type=element-attr><code>target</code></dfn> and
  <dfn data-dfn-for=form,button id=attr-fs-formtarget data-dfn-type=element-attr><code>formtarget</code></dfn>
  content attributes, if specified, must have values that are <a href=document-sequences.html#valid-navigable-target-name-or-keyword id=form-submission-attributes:valid-navigable-target-name-or-keyword>valid navigable target names or keywords</a>.</p>

  <hr>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formnovalidate title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#formnovalidate</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>4+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=form,button id=attr-fs-novalidate data-dfn-type=element-attr><code>novalidate</code></dfn> and <dfn data-dfn-for=form,button id=attr-fs-formnovalidate data-dfn-type=element-attr><code>formnovalidate</code></dfn> content attributes are <a href=common-microsyntaxes.html#boolean-attribute id=form-submission-attributes:boolean-attribute>boolean attributes</a>. If present, they indicate that the form is
  not to be validated during submission.</p>

  <p>The <dfn id=concept-fs-novalidate>no-validate state</dfn> of an element is true if the
  element is a <a href=forms.html#concept-submit-button id=form-submission-attributes:concept-submit-button-6>submit button</a> and the element's <code id=form-submission-attributes:attr-fs-formnovalidate-2><a href=#attr-fs-formnovalidate>formnovalidate</a></code> attribute is present, or if the element's
  <a href=#form-owner id=form-submission-attributes:form-owner-4>form owner</a>'s <code id=form-submission-attributes:attr-fs-novalidate-2><a href=#attr-fs-novalidate>novalidate</a></code> attribute is present,
  and false otherwise.</p>

  <div class=example>

   <p>This attribute is useful to include "save" buttons on forms that have validation constraints,
   to allow users to save their progress even though they haven't fully entered the data in the
   form. The following example shows a simple form that has two required fields. There are three
   buttons: one to submit the form, which requires both fields to be filled in; one to save the form
   so that the user can come back and fill it in later; and one to cancel the form altogether.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;editor.cgi&quot;</c-> <c- e>method</c-><c- o>=</c-><c- s>&quot;post&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Name: <c- p>&lt;</c-><c- f>input</c-> <c- e>required</c-> <c- e>name</c-><c- o>=</c-><c- s>fn</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Essay: <c- p>&lt;</c-><c- f>textarea</c-> <c- e>required</c-> <c- e>name</c-><c- o>=</c-><c- s>essay</c-><c- p>&gt;&lt;/</c-><c- f>textarea</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>name</c-><c- o>=</c-><c- s>submit</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Submit essay&quot;</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>formnovalidate</c-> <c- e>name</c-><c- o>=</c-><c- s>save</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Save essay&quot;</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>formnovalidate</c-> <c- e>name</c-><c- o>=</c-><c- s>cancel</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Cancel&quot;</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  </div>

  

  <hr>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/action title="The HTMLFormElement.action property represents the action of the <form> element.">HTMLFormElement/action</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=HTMLFormElement id=dom-fs-action data-dfn-type=attribute><code>action</code></dfn>
  getter steps are:</p>

  <ol><li><p>Let <var>attribute</var> be <a id=form-submission-attributes:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <code id=form-submission-attributes:attr-fs-action-3><a href=#attr-fs-action>action</a></code> attribute.<li><p>If <var>attribute</var> is null or <var>attribute</var>'s <a href=https://dom.spec.whatwg.org/#concept-attribute-value id=form-submission-attributes:concept-attribute-value data-x-internal=concept-attribute-value>value</a> is the empty string, then return
   <a id=form-submission-attributes:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=form-submission-attributes:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a href=https://dom.spec.whatwg.org/#concept-document-url id="form-submission-attributes:the-document's-address" data-x-internal="the-document's-address">URL</a>.<li><p>Let <var>urlString</var> be the result of <a id=form-submission-attributes:encoding-parsing-and-serializing-a-url href=urls-and-fetching.html#encoding-parsing-and-serializing-a-url>encoding-parsing-and-serializing a
   URL</a> given <var>attribute</var>'s <a href=https://dom.spec.whatwg.org/#concept-attribute-value id=form-submission-attributes:concept-attribute-value-2 data-x-internal=concept-attribute-value>value</a>,
   relative to <a id=form-submission-attributes:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=form-submission-attributes:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li><p>If <var>urlString</var> is not failure, then return <var>urlString</var>.<li><p>Return <var>attribute</var>'s <a href=https://dom.spec.whatwg.org/#concept-attribute-value id=form-submission-attributes:concept-attribute-value-3 data-x-internal=concept-attribute-value>value</a>, <a href=https://infra.spec.whatwg.org/#javascript-string-convert id=form-submission-attributes:convert data-x-internal=convert>converted to a scalar value string</a>.</ol>

  <p>The <dfn data-dfn-for=HTMLButtonElement,HTMLInputElement id=dom-fs-formaction data-dfn-type=attribute><code>formAction</code></dfn> getter steps are:</p>

  <ol><li><p>Let <var>attribute</var> be <a id=form-submission-attributes:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <code id=form-submission-attributes:attr-fs-formaction-3><a href=#attr-fs-formaction>formaction</a></code> attribute.<li><p>If <var>attribute</var> is null or <var>attribute</var>'s <a href=https://dom.spec.whatwg.org/#concept-attribute-value id=form-submission-attributes:concept-attribute-value-4 data-x-internal=concept-attribute-value>value</a> is the empty string, then return
   <a id=form-submission-attributes:this-5 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=form-submission-attributes:node-document-3 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a href=https://dom.spec.whatwg.org/#concept-document-url id="form-submission-attributes:the-document's-address-2" data-x-internal="the-document's-address">URL</a>.<li><p>Let <var>urlString</var> be the result of <a id=form-submission-attributes:encoding-parsing-and-serializing-a-url-2 href=urls-and-fetching.html#encoding-parsing-and-serializing-a-url>encoding-parsing-and-serializing a
   URL</a> given <var>attribute</var>'s <a href=https://dom.spec.whatwg.org/#concept-attribute-value id=form-submission-attributes:concept-attribute-value-5 data-x-internal=concept-attribute-value>value</a>,
   relative to <a id=form-submission-attributes:this-6 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=form-submission-attributes:node-document-4 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li><p>If <var>urlString</var> is not failure, then return <var>urlString</var>.<li><p>Return <var>attribute</var>'s <a href=https://dom.spec.whatwg.org/#concept-attribute-value id=form-submission-attributes:concept-attribute-value-6 data-x-internal=concept-attribute-value>value</a>, <a href=https://infra.spec.whatwg.org/#javascript-string-convert id=form-submission-attributes:convert-2 data-x-internal=convert>converted to a scalar value string</a>.</ol>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/method title="The HTMLFormElement.method property represents the HTTP method used to submit the <form>.">HTMLFormElement/method</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/enctype title="The HTMLFormElement.enctype property is the MIME type of content that is used to submit the form to the server. Possible values are:">HTMLFormElement/enctype</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>6+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/encoding title="The HTMLFormElement.encoding property is an alternative name for the enctype element on the DOM HTMLFormElement object.">HTMLFormElement/encoding</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=HTMLFormElement id=dom-fs-method data-dfn-type=attribute><code>method</code></dfn> and
  <dfn data-dfn-for=HTMLFormElement id=dom-fs-enctype data-dfn-type=attribute><code>enctype</code></dfn> IDL
  attributes must <a id=form-submission-attributes:reflect href=common-dom-interfaces.html#reflect>reflect</a> the respective content attributes of the same name,
  <a id=form-submission-attributes:limited-to-only-known-values href=common-dom-interfaces.html#limited-to-only-known-values>limited to only known values</a>. The <dfn data-dfn-for=HTMLFormElement id=dom-fs-encoding data-dfn-type=attribute><code>encoding</code></dfn> IDL attribute must <a id=form-submission-attributes:reflect-2 href=common-dom-interfaces.html#reflect>reflect</a> the <code id=form-submission-attributes:attr-fs-enctype-3><a href=#attr-fs-enctype>enctype</a></code> content attribute, <a id=form-submission-attributes:limited-to-only-known-values-2 href=common-dom-interfaces.html#limited-to-only-known-values>limited to only known
  values</a>. The <dfn data-dfn-for=HTMLButtonElement,HTMLInputElement id=dom-fs-formenctype data-dfn-type=attribute><code>formEnctype</code></dfn> IDL attribute must <a id=form-submission-attributes:reflect-3 href=common-dom-interfaces.html#reflect>reflect</a> the
  <code id=form-submission-attributes:attr-fs-formenctype-4><a href=#attr-fs-formenctype>formenctype</a></code> content attribute, <a id=form-submission-attributes:limited-to-only-known-values-3 href=common-dom-interfaces.html#limited-to-only-known-values>limited to only
  known values</a>. The <dfn data-dfn-for=HTMLButtonElement,HTMLInputElement id=dom-fs-formmethod data-dfn-type=attribute><code>formMethod</code></dfn> IDL attribute must <a id=form-submission-attributes:reflect-4 href=common-dom-interfaces.html#reflect>reflect</a> the
  <code id=form-submission-attributes:attr-fs-formmethod-4><a href=#attr-fs-formmethod>formmethod</a></code> content attribute, <a id=form-submission-attributes:limited-to-only-known-values-4 href=common-dom-interfaces.html#limited-to-only-known-values>limited to only known
  values</a>.

  </p>


  <h5 id=autofill><span class=secno>4.10.19.7</span> Autofill<a href=#autofill class=self-link></a></h5>

  <h6 id=autofilling-form-controls:-the-autocomplete-attribute><span class=secno>4.10.19.7.1</span> Autofilling form controls: the <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute<a href=#autofilling-form-controls:-the-autocomplete-attribute class=self-link></a></h6>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete title="The HTML autocomplete attribute lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.">Attributes/autocomplete</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>14+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>User agents sometimes have features for helping users fill forms in, for example prefilling the
  user's address based on earlier user input. The <dfn data-dfn-for=button,fieldset,input,object,output,select,textarea id=attr-fe-autocomplete data-dfn-type=element-attr><code>autocomplete</code></dfn> content attribute can be used to hint to
  the user agent how to, or indeed whether to, provide such a feature.</p>

  

  <p>There are two ways this attribute is used. When wearing the <dfn id=autofill-expectation-mantle>autofill expectation
  mantle</dfn>, the <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-2><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute describes what
  input is expected from users. When wearing the <dfn id=autofill-anchor-mantle>autofill anchor mantle</dfn>, the <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-3><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute describes the meaning of the given
  value.</p>

  <p>On an <code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element><a href=input.html#the-input-element>input</a></code> element whose <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute is
  in the <a href="input.html#hidden-state-(type=hidden)" id="autofilling-form-controls:-the-autocomplete-attribute:hidden-state-(type=hidden)">Hidden</a> state, the <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-4><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute wears the <a href=#autofill-anchor-mantle id=autofilling-form-controls:-the-autocomplete-attribute:autofill-anchor-mantle>autofill anchor
  mantle</a>. In all other cases, it wears the <a href=#autofill-expectation-mantle id=autofilling-form-controls:-the-autocomplete-attribute:autofill-expectation-mantle>autofill expectation mantle</a>.</p>

  <p>When wearing the <a href=#autofill-expectation-mantle id=autofilling-form-controls:-the-autocomplete-attribute:autofill-expectation-mantle-2>autofill expectation mantle</a>, the <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-5><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute, if specified, must have a value that
  is an ordered <a id=autofilling-form-controls:-the-autocomplete-attribute:set-of-space-separated-tokens href=common-microsyntaxes.html#set-of-space-separated-tokens>set of space-separated tokens</a> consisting of either a single token that
  is an <a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-off><a href=#attr-fe-autocomplete-off>off</a></code>", or a single token that is an <a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-case-insensitive-2 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII
  case-insensitive</a> match for the string "<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-on><a href=#attr-fe-autocomplete-on>on</a></code>",
  or <a href=#autofill-detail-tokens id=autofilling-form-controls:-the-autocomplete-attribute:autofill-detail-tokens>autofill detail tokens</a>.</p>

  <p>When wearing the <a href=#autofill-anchor-mantle id=autofilling-form-controls:-the-autocomplete-attribute:autofill-anchor-mantle-2>autofill anchor
  mantle</a>, the <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-6><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute, if specified, must have a value that is an ordered <a id=autofilling-form-controls:-the-autocomplete-attribute:set-of-space-separated-tokens-2 href=common-microsyntaxes.html#set-of-space-separated-tokens>set of
  space-separated tokens</a> consisting of just <a href=#autofill-detail-tokens id=autofilling-form-controls:-the-autocomplete-attribute:autofill-detail-tokens-2>autofill detail tokens</a> (i.e. the
  "<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-on-2><a href=#attr-fe-autocomplete-on>on</a></code>" and "<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-off-2><a href=#attr-fe-autocomplete-off>off</a></code>" keywords are not allowed).</p>

  <p><dfn id=autofill-detail-tokens>Autofill detail tokens</dfn> are the following, in the order given below:</p>

  <ol><li>

    <p>Optionally, a token whose first eight characters are an <a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-case-insensitive-3 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a>
    match for the string "<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-section data-dfn-type=attr-value><code>section-</code></dfn>", meaning that the field belongs to
    the named group.</p>

    <div class=example>

     <p>For example, if there are two shipping addresses in the form, then they could be marked up
     as:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c->Ship the blue gift to...<c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c-> Address:     <c- p>&lt;</c-><c- f>textarea</c-> <c- e>name</c-><c- o>=</c-><c- s>ba</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;section-blue shipping street-address&quot;</c-><c- p>&gt;&lt;/</c-><c- f>textarea</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c-> City:        <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>bc</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;section-blue shipping address-level2&quot;</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c-> Postal Code: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>bp</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;section-blue shipping postal-code&quot;</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c->Ship the red gift to...<c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c-> Address:     <c- p>&lt;</c-><c- f>textarea</c-> <c- e>name</c-><c- o>=</c-><c- s>ra</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;section-red shipping street-address&quot;</c-><c- p>&gt;&lt;/</c-><c- f>textarea</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c-> City:        <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>rc</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;section-red shipping address-level2&quot;</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c-> Postal Code: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>rp</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;section-red shipping postal-code&quot;</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c-></code></pre>

    </div>
   <li>
    <p>Optionally, a token that is an <a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-case-insensitive-4 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for one of the
    following strings:</p>

    <ul class=brief><li>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-shipping data-dfn-type=attr-value><code>shipping</code></dfn>", meaning the field is part of the
     shipping address or contact information

     <li>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-billing data-dfn-type=attr-value><code>billing</code></dfn>", meaning the field is part of the
     billing address or contact information
    </ul>
   <li>
    <p>Either of the following two options:</p>

    <ul><li>
      <p>A token that is an <a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-case-insensitive-5 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for one of the following
      <a href=#autofill-field id=autofilling-form-controls:-the-autocomplete-attribute:autofill-field>autofill field</a> names, excluding those that are <a href=#inappropriate-for-the-control id=autofilling-form-controls:-the-autocomplete-attribute:inappropriate-for-the-control>inappropriate for the
      control</a>:</p>

      <ul class=brief><li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-name><a href=#attr-fe-autocomplete-name>name</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-honorific-prefix><a href=#attr-fe-autocomplete-honorific-prefix>honorific-prefix</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-given-name><a href=#attr-fe-autocomplete-given-name>given-name</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-additional-name><a href=#attr-fe-autocomplete-additional-name>additional-name</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-family-name><a href=#attr-fe-autocomplete-family-name>family-name</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-honorific-suffix><a href=#attr-fe-autocomplete-honorific-suffix>honorific-suffix</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-nickname><a href=#attr-fe-autocomplete-nickname>nickname</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-username><a href=#attr-fe-autocomplete-username>username</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-new-password><a href=#attr-fe-autocomplete-new-password>new-password</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-current-password><a href=#attr-fe-autocomplete-current-password>current-password</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-one-time-code><a href=#attr-fe-autocomplete-one-time-code>one-time-code</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-organization-title><a href=#attr-fe-autocomplete-organization-title>organization-title</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-organization><a href=#attr-fe-autocomplete-organization>organization</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-street-address><a href=#attr-fe-autocomplete-street-address>street-address</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-line1><a href=#attr-fe-autocomplete-address-line1>address-line1</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-line2><a href=#attr-fe-autocomplete-address-line2>address-line2</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-line3><a href=#attr-fe-autocomplete-address-line3>address-line3</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-level4><a href=#attr-fe-autocomplete-address-level4>address-level4</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-level3><a href=#attr-fe-autocomplete-address-level3>address-level3</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-level2><a href=#attr-fe-autocomplete-address-level2>address-level2</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-level1><a href=#attr-fe-autocomplete-address-level1>address-level1</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-country><a href=#attr-fe-autocomplete-country>country</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-country-name><a href=#attr-fe-autocomplete-country-name>country-name</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-postal-code><a href=#attr-fe-autocomplete-postal-code>postal-code</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-name><a href=#attr-fe-autocomplete-cc-name>cc-name</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-given-name><a href=#attr-fe-autocomplete-cc-given-name>cc-given-name</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-additional-name><a href=#attr-fe-autocomplete-cc-additional-name>cc-additional-name</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-family-name><a href=#attr-fe-autocomplete-cc-family-name>cc-family-name</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-number><a href=#attr-fe-autocomplete-cc-number>cc-number</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-exp><a href=#attr-fe-autocomplete-cc-exp>cc-exp</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-exp-month><a href=#attr-fe-autocomplete-cc-exp-month>cc-exp-month</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-exp-year><a href=#attr-fe-autocomplete-cc-exp-year>cc-exp-year</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-csc><a href=#attr-fe-autocomplete-cc-csc>cc-csc</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-type><a href=#attr-fe-autocomplete-cc-type>cc-type</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-transaction-currency><a href=#attr-fe-autocomplete-transaction-currency>transaction-currency</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-transaction-amount><a href=#attr-fe-autocomplete-transaction-amount>transaction-amount</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-language><a href=#attr-fe-autocomplete-language>language</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-bday><a href=#attr-fe-autocomplete-bday>bday</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-bday-day><a href=#attr-fe-autocomplete-bday-day>bday-day</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-bday-month><a href=#attr-fe-autocomplete-bday-month>bday-month</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-bday-year><a href=#attr-fe-autocomplete-bday-year>bday-year</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-sex><a href=#attr-fe-autocomplete-sex>sex</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-url><a href=#attr-fe-autocomplete-url>url</a></code>"
       <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-photo><a href=#attr-fe-autocomplete-photo>photo</a></code>"
      </ul>

      <p>(See the table below for descriptions of these values.)</p>
     <li>
      <p>The following, in the given order:</p>

      <ol><li>
        <p>Optionally, a token that is an <a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-case-insensitive-6 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for one of the
        following strings:</p>

        <ul class=brief><li>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-home data-dfn-type=attr-value><code>home</code></dfn>", meaning the field is for contacting
         someone at their residence

         <li>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-work data-dfn-type=attr-value><code>work</code></dfn>", meaning the field is for contacting
         someone at their workplace

         <li>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-mobile data-dfn-type=attr-value><code>mobile</code></dfn>", meaning the
         field is for contacting someone regardless of location

         <li>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-fax data-dfn-type=attr-value><code>fax</code></dfn>", meaning the field describes a fax
         machine's contact details

         <li>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-pager data-dfn-type=attr-value><code>pager</code></dfn>", meaning the field describes a
         pager's or beeper's contact details
        </ul>
       <li>
        <p>A token that is an <a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-case-insensitive-7 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for one of the following
        <a href=#autofill-field id=autofilling-form-controls:-the-autocomplete-attribute:autofill-field-2>autofill field</a> names, excluding those that are <a href=#inappropriate-for-the-control id=autofilling-form-controls:-the-autocomplete-attribute:inappropriate-for-the-control-2>inappropriate for the
        control</a>:</p>

        <ul class=brief><li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-tel><a href=#attr-fe-autocomplete-tel>tel</a></code>"
         <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-tel-country-code><a href=#attr-fe-autocomplete-tel-country-code>tel-country-code</a></code>"
         <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-tel-national><a href=#attr-fe-autocomplete-tel-national>tel-national</a></code>"
         <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-tel-area-code><a href=#attr-fe-autocomplete-tel-area-code>tel-area-code</a></code>"
         <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-tel-local><a href=#attr-fe-autocomplete-tel-local>tel-local</a></code>"
         <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-tel-local-prefix><a href=#attr-fe-autocomplete-tel-local-prefix>tel-local-prefix</a></code>"
         <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-tel-local-suffix><a href=#attr-fe-autocomplete-tel-local-suffix>tel-local-suffix</a></code>"
         <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-tel-extension><a href=#attr-fe-autocomplete-tel-extension>tel-extension</a></code>"
         <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-email><a href=#attr-fe-autocomplete-email>email</a></code>"
         <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-impp><a href=#attr-fe-autocomplete-impp>impp</a></code>"
        </ul>

        <p>(See the table below for descriptions of these values.)</p>
       </ol>
     </ul>
   <li><p>Optionally, a token that is an <a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-case-insensitive-8 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string
   "<dfn id=attr-fe-autocomplete-webauthn><code>webauthn</code></dfn>", meaning the user agent
   should show <a href=https://w3c.github.io/webauthn/#public-key-credential id=autofilling-form-controls:-the-autocomplete-attribute:public-key-credential data-x-internal=public-key-credential>public key credentials</a> available via
   <code id=autofilling-form-controls:-the-autocomplete-attribute:conditional-mediation><a data-x-internal=conditional-mediation href=https://w3c.github.io/webappsec-credential-management/#dom-credentialmediationrequirement-conditional>conditional</a></code> mediation when the user interacts with the
   form control. <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-webauthn><a href=#attr-fe-autocomplete-webauthn>webauthn</a></code> is only valid for
   <code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-2><a href=input.html#the-input-element>input</a></code> and <code id=autofilling-form-controls:-the-autocomplete-attribute:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code> elements.</ol>

  <p>As noted earlier, the meaning of the attribute and its keywords depends on the mantle that the
  attribute is wearing.</p>

  <dl class=switch><dt>When wearing the <a href=#autofill-expectation-mantle id=autofilling-form-controls:-the-autocomplete-attribute:autofill-expectation-mantle-3>autofill expectation mantle</a>...

   <dd>
    <p>The "<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-off data-dfn-type=attr-value><code>off</code></dfn>" keyword indicates either that the control's
    input data is particularly sensitive (for example the activation code for a nuclear weapon); or
    that it is a value that will never be reused (for example a one-time-key for a bank login) and
    the user will therefore have to explicitly enter the data each time, instead of being able to
    rely on the UA to prefill the value for them; or that the document provides its own autocomplete
    mechanism and does not want the user agent to provide autocompletion values.</p>

    <p>The "<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-on data-dfn-type=attr-value><code>on</code></dfn>" keyword indicates that the user agent is
    allowed to provide the user with autocompletion values, but does not provide any further
    information about what kind of data the user might be expected to enter. User agents would have
    to use heuristics to decide what autocompletion values to suggest.</p>

    <p>The <a href=#autofill-field id=autofilling-form-controls:-the-autocomplete-attribute:autofill-field-3>autofill field</a> listed above indicate that the user agent is allowed to
    provide the user with autocompletion values, and specifies what kind of value is expected. The
    meaning of each such keyword is described in the table below.</p>

    <p>If the <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-7><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute is omitted, the default
    value corresponding to the state of the element's <a href=#form-owner id=autofilling-form-controls:-the-autocomplete-attribute:form-owner>form owner</a>'s <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-form-autocomplete><a href=forms.html#attr-form-autocomplete>autocomplete</a></code> attribute is used instead (either "<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-on-3><a href=#attr-fe-autocomplete-on>on</a></code>" or "<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-off-3><a href=#attr-fe-autocomplete-off>off</a></code>"). If there is no <a href=#form-owner id=autofilling-form-controls:-the-autocomplete-attribute:form-owner-2>form owner</a>, then the
    value "<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-on-4><a href=#attr-fe-autocomplete-on>on</a></code>" is used.</p>
   <dt>When wearing the <a href=#autofill-anchor-mantle id=autofilling-form-controls:-the-autocomplete-attribute:autofill-anchor-mantle-3>autofill anchor mantle</a>...

   <dd>
    <p>The <a href=#autofill-field id=autofilling-form-controls:-the-autocomplete-attribute:autofill-field-4>autofill field</a> listed above indicate that the value of the particular kind
    of value specified is that value provided for this element. The meaning of each such keyword is
    described in the table below.</p>

    <div class=example>

     <p>In this example the page has explicitly specified the currency and amount of the
     transaction. The form requests a credit card and other billing details. The user agent could
     use this information to suggest a credit card that it knows has sufficient balance and that
     supports the relevant currency.</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>method</c-><c- o>=</c-><c- s>post</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;step2.cgi&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>hidden</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>transaction-currency</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;CHF&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>hidden</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>transaction-amount</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;15.00&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Credit card number: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>text</c-> <c- e>inputmode</c-><c- o>=</c-><c- s>numeric</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>cc-number</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Expiry Date: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>month</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>cc-exp</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Continue...&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

    </div>
   </dl>

  <p>The <dfn id=autofill-field>autofill field</dfn> keywords relate to each other as described in the table below. Each field name
  listed on a row of this table corresponds to the meaning given in the cell for that row in the
  column labeled "Meaning". Some fields correspond to subparts of other fields; for example, a
  credit card expiry date can be expressed as one field giving both the month and year of expiry
  ("<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-exp-2><a href=#attr-fe-autocomplete-cc-exp>cc-exp</a></code>"), or as two fields, one giving the
  month ("<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-exp-month-2><a href=#attr-fe-autocomplete-cc-exp-month>cc-exp-month</a></code>") and one the year
  ("<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-exp-year-2><a href=#attr-fe-autocomplete-cc-exp-year>cc-exp-year</a></code>"). In such cases, the names of
  the broader fields cover multiple rows, in which the narrower fields are defined.</p>

  <p class=note>Generally, authors are encouraged to use the broader fields rather than the
  narrower fields, as the narrower fields tend to expose Western biases. For example, while it is
  common in some Western cultures to have a given name and a family name, in that order (and thus
  often referred to as a <i>first name</i> and a <i>surname</i>), many cultures put the family name
  first and the given name second, and many others simply have one name (a <i>mononym</i>). Having a
  single field is therefore more flexible.</p>

  <p>Some fields are only appropriate for certain form controls. An <a href=#autofill-field id=autofilling-form-controls:-the-autocomplete-attribute:autofill-field-5>autofill field</a> name
  is <dfn id=inappropriate-for-the-control>inappropriate for a control</dfn> if the control
  does not belong to the group listed for that <a href=#autofill-field id=autofilling-form-controls:-the-autocomplete-attribute:autofill-field-6>autofill field</a> in the fifth column of
  the first row describing that <a href=#autofill-field id=autofilling-form-controls:-the-autocomplete-attribute:autofill-field-7>autofill field</a> in the table below. What controls fall
  into each group is described below the table.</p>

  <table><thead><tr><th colspan=4> Field name
     <th> Meaning
     <th> Canonical Format
     <th> Canonical Format Example
     <th> Control group
   <tbody><tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-name data-dfn-type=attr-value><code>name</code></dfn>"
     <td>Full name
     <td>Free-form text, no newlines
     <td>Sir Timothy John Berners-Lee, OM, KBE, FRS, FREng, FRSA
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text>Text</a>
    <tr><td class=non-rectangular-cell-indentation rowspan=5>
      <td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-honorific-prefix data-dfn-type=attr-value><code>honorific-prefix</code></dfn>"
      <td>Prefix or title (e.g. "Mr.", "Ms.", "Dr.", "<span lang=fr>M<sup>lle</sup></span>")
      <td>Free-form text, no newlines
      <td>Sir
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-2>Text</a>
    <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-given-name data-dfn-type=attr-value><code>given-name</code></dfn>"
      <td>Given name (in some Western cultures, also known as the <i>first name</i>)
      <td>Free-form text, no newlines
      <td>Timothy
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-3>Text</a>
    <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-additional-name data-dfn-type=attr-value><code>additional-name</code></dfn>"
      <td>Additional names (in some Western cultures, also known as <i>middle names</i>, forenames other than the first name)
      <td>Free-form text, no newlines
      <td>John
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-4>Text</a>
    <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-family-name data-dfn-type=attr-value><code>family-name</code></dfn>"
      <td>Family name (in some Western cultures, also known as the <i>last name</i> or <i>surname</i>)
      <td>Free-form text, no newlines
      <td>Berners-Lee
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-5>Text</a>
    <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-honorific-suffix data-dfn-type=attr-value><code>honorific-suffix</code></dfn>"
      <td>Suffix (e.g. "Jr.", "B.Sc.", "MBASW", "II")
      <td>Free-form text, no newlines
      <td>OM, KBE, FRS, FREng, FRSA
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-6>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-nickname data-dfn-type=attr-value><code>nickname</code></dfn>"
     <td>Nickname, screen name, handle: a typically short name used instead of the full name
     <td>Free-form text, no newlines
     <td>Tim
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-7>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-organization-title data-dfn-type=attr-value><code>organization-title</code></dfn>"
     <td>Job title (e.g. "Software Engineer", "Senior Vice President", "Deputy Managing Director")
     <td>Free-form text, no newlines
     <td>Professor
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-8>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-username data-dfn-type=attr-value><code>username</code></dfn>"
     <td>A username
     <td>Free-form text, no newlines
     <td>timbl
     <td><a href=#control-group-username id=autofilling-form-controls:-the-autocomplete-attribute:control-group-username>Username</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-new-password data-dfn-type=attr-value><code>new-password</code></dfn>"
     <td>A new password (e.g. when creating an account or changing a password)
     <td>Free-form text, no newlines
     <td>GUMFXbadyrS3
     <td><a href=#control-group-password id=autofilling-form-controls:-the-autocomplete-attribute:control-group-password>Password</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-current-password data-dfn-type=attr-value><code>current-password</code></dfn>"
     <td>The current password for the account identified by the <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-username-2><a href=#attr-fe-autocomplete-username>username</a></code> field (e.g. when logging in)
     <td>Free-form text, no newlines
     <td>qwerty 
     <td><a href=#control-group-password id=autofilling-form-controls:-the-autocomplete-attribute:control-group-password-2>Password</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-one-time-code data-dfn-type=attr-value><code>one-time-code</code></dfn>"
     <td>One-time code used for verifying user identity
     <td>Free-form text, no newlines
     <td>123456
     <td><a href=#control-group-password id=autofilling-form-controls:-the-autocomplete-attribute:control-group-password-3>Password</a>
   <tbody><tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-organization data-dfn-type=attr-value><code>organization</code></dfn>"
     <td>Company name corresponding to the person, address, or contact information in the other fields associated with this field
     <td>Free-form text, no newlines
     <td>World Wide Web Consortium
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-9>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-street-address data-dfn-type=attr-value><code>street-address</code></dfn>"
     <td>Street address (multiple lines, newlines preserved)
     <td>Free-form text
     <td>32 Vassar Street<br>
MIT Room 32-G524
     <td><a href=#control-group-multiline id=autofilling-form-controls:-the-autocomplete-attribute:control-group-multiline>Multiline</a>
    <tr><td class=non-rectangular-cell-indentation rowspan=3>
      <td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-address-line1 data-dfn-type=attr-value><code>address-line1</code></dfn>"
      <td rowspan=3>Street address (one line per field)
      <td>Free-form text, no newlines
      <td>32 Vassar Street
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-10>Text</a>
    <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-address-line2 data-dfn-type=attr-value><code>address-line2</code></dfn>"
      <td>Free-form text, no newlines
      <td>MIT Room 32-G524
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-11>Text</a>
    <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-address-line3 data-dfn-type=attr-value><code>address-line3</code></dfn>"
      <td>Free-form text, no newlines
      <td>
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-12>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-address-level4 data-dfn-type=attr-value><code>address-level4</code></dfn>"
     <td>The most fine-grained <a href=#more-on-address-levels>administrative level</a>, in
     addresses with four administrative levels
     <td>Free-form text, no newlines
     <td>
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-13>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-address-level3 data-dfn-type=attr-value><code>address-level3</code></dfn>"
     <td>The <a href=#more-on-address-levels>third administrative level</a>, in addresses with
     three or more administrative levels
     <td>Free-form text, no newlines
     <td>
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-14>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-address-level2 data-dfn-type=attr-value><code>address-level2</code></dfn>"
     <td>The <a href=#more-on-address-levels>second administrative level</a>, in addresses with
     two or more administrative levels; in the countries with two administrative levels, this would
     typically be the city, town, village, or other locality within which the relevant street
     address is found
     <td>Free-form text, no newlines
     <td>Cambridge
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-15>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-address-level1 data-dfn-type=attr-value><code>address-level1</code></dfn>"
     <td>The broadest <a href=#more-on-address-levels>administrative level</a> in the address,
     i.e. the province within which the locality is found; for example, in the US, this would be the
     state; in Switzerland it would be the canton; in the UK, the post town
     <td>Free-form text, no newlines
     <td>MA
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-16>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-country data-dfn-type=attr-value><code>country</code></dfn>"
     <td>Country code
     <td>Valid <a href=https://www.iso.org/iso-3166-country-codes.html>ISO 3166-1-alpha-2 country code</a> <a href=references.html#refsISO3166>[ISO3166]</a>
     <td>US
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-17>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-country-name data-dfn-type=attr-value><code>country-name</code></dfn>"
     <td>Country name
     <td>Free-form text, no newlines; <a href=#autofill-country>derived from <code>country</code> in some cases</a>
     <td>US
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-18>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-postal-code data-dfn-type=attr-value><code>postal-code</code></dfn>"
     <td>Postal code, post code, ZIP code, CEDEX code (if CEDEX, append "CEDEX", and the <i lang=fr>arrondissement</i>, if relevant, to the <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-level2-2><a href=#attr-fe-autocomplete-address-level2>address-level2</a></code> field)
     <td>Free-form text, no newlines
     <td>02139
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-19>Text</a>
   <tbody><tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-cc-name data-dfn-type=attr-value><code>cc-name</code></dfn>"
     <td>Full name as given on the payment instrument
     <td>Free-form text, no newlines
     <td>Tim Berners-Lee
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-20>Text</a>
    <tr><td class=non-rectangular-cell-indentation rowspan=3>
      <td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-cc-given-name data-dfn-type=attr-value><code>cc-given-name</code></dfn>"
      <td>Given name as given on the payment instrument (in some Western cultures, also known as the <i>first name</i>)
      <td>Free-form text, no newlines
      <td>Tim
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-21>Text</a>
    <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-cc-additional-name data-dfn-type=attr-value><code>cc-additional-name</code></dfn>"
      <td>Additional names given on the payment instrument (in some Western cultures, also known as <i>middle names</i>, forenames other than the first name)
      <td>Free-form text, no newlines
      <td>
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-22>Text</a>
    <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-cc-family-name data-dfn-type=attr-value><code>cc-family-name</code></dfn>"
      <td>Family name given on the payment instrument (in some Western cultures, also known as the <i>last name</i> or <i>surname</i>)
      <td>Free-form text, no newlines
      <td>Berners-Lee
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-23>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-cc-number data-dfn-type=attr-value><code>cc-number</code></dfn>"
     <td>Code identifying the payment instrument (e.g. the credit card number)
     <td><a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a>
     <td>4114360123456785 
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-24>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-cc-exp data-dfn-type=attr-value><code>cc-exp</code></dfn>"
     <td>Expiration date of the payment instrument
     <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-month-string href=common-microsyntaxes.html#valid-month-string>Valid month string</a>
     <td>2014-12
     <td><a href=#control-group-month id=autofilling-form-controls:-the-autocomplete-attribute:control-group-month>Month</a>
    <tr><td class=non-rectangular-cell-indentation rowspan=2>
      <td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-cc-exp-month data-dfn-type=attr-value><code>cc-exp-month</code></dfn>"
      <td>Month component of the expiration date of the payment instrument
      <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-integer href=common-microsyntaxes.html#valid-integer>Valid integer</a> in the range 1..12
      <td>12
      <td><a href=#control-group-numeric id=autofilling-form-controls:-the-autocomplete-attribute:control-group-numeric>Numeric</a>
    <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-cc-exp-year data-dfn-type=attr-value><code>cc-exp-year</code></dfn>"
      <td>Year component of the expiration date of the payment instrument
      <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-integer-2 href=common-microsyntaxes.html#valid-integer>Valid integer</a> greater than zero
      <td>2014
      <td><a href=#control-group-numeric id=autofilling-form-controls:-the-autocomplete-attribute:control-group-numeric-2>Numeric</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-cc-csc data-dfn-type=attr-value><code>cc-csc</code></dfn>"
     <td>Security code for the payment instrument (also known as the card security code (CSC), card validation code (CVC), card verification value (CVV), signature panel code (SPC), credit card ID (CCID), etc.)
     <td><a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-2 href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a>
     <td>419
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-25>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-cc-type data-dfn-type=attr-value><code>cc-type</code></dfn>"
     <td>Type of payment instrument
     <td>Free-form text, no newlines
     <td>Visa
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-26>Text</a>
   <tbody><tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-transaction-currency data-dfn-type=attr-value><code>transaction-currency</code></dfn>"
     <td>The currency that the user would prefer the transaction to use
     <td>ISO 4217 currency code <a href=references.html#refsISO4217>[ISO4217]</a>
     <td>GBP
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-27>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-transaction-amount data-dfn-type=attr-value><code>transaction-amount</code></dfn>"
     <td>The amount that the user would like for the transaction (e.g. when entering a bid or sale price)
     <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-floating-point-number href=common-microsyntaxes.html#valid-floating-point-number>Valid floating-point number</a>
     <td>401.00
     <td><a href=#control-group-numeric id=autofilling-form-controls:-the-autocomplete-attribute:control-group-numeric-3>Numeric</a>
   <tbody><tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-language data-dfn-type=attr-value><code>language</code></dfn>"
     <td>Preferred language
     <td>Valid BCP 47 language tag <a href=references.html#refsBCP47>[BCP47]</a>
     <td>en
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-28>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-bday data-dfn-type=attr-value><code>bday</code></dfn>"
     <td>Birthday
     <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-date-string href=common-microsyntaxes.html#valid-date-string>Valid date string</a>
     <td>1955-06-08
     <td><a href=#control-group-date id=autofilling-form-controls:-the-autocomplete-attribute:control-group-date>Date</a>
    <tr><td class=non-rectangular-cell-indentation rowspan=3>
      <td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-bday-day data-dfn-type=attr-value><code>bday-day</code></dfn>"
      <td>Day component of birthday
      <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-integer-3 href=common-microsyntaxes.html#valid-integer>Valid integer</a> in the range 1..31
      <td>8
      <td><a href=#control-group-numeric id=autofilling-form-controls:-the-autocomplete-attribute:control-group-numeric-4>Numeric</a>
    <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-bday-month data-dfn-type=attr-value><code>bday-month</code></dfn>"
      <td>Month component of birthday
      <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-integer-4 href=common-microsyntaxes.html#valid-integer>Valid integer</a> in the range 1..12
      <td>6
      <td><a href=#control-group-numeric id=autofilling-form-controls:-the-autocomplete-attribute:control-group-numeric-5>Numeric</a>
    <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-bday-year data-dfn-type=attr-value><code>bday-year</code></dfn>"
      <td>Year component of birthday
      <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-integer-5 href=common-microsyntaxes.html#valid-integer>Valid integer</a> greater than zero
      <td>1955
      <td><a href=#control-group-numeric id=autofilling-form-controls:-the-autocomplete-attribute:control-group-numeric-6>Numeric</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-sex data-dfn-type=attr-value><code>sex</code></dfn>"
     <td>Gender identity (e.g. Female, Fa'afafine)
     <td>Free-form text, no newlines
     <td>Male
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-29>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-url data-dfn-type=attr-value><code>url</code></dfn>"
     <td>Home page or other web page corresponding to the company, person, address, or contact information in the other fields associated with this field
     <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-url-string href=https://url.spec.whatwg.org/#valid-url-string data-x-internal=valid-url-string>Valid URL string</a>
     <td>https://www.w3.org/People/Berners-Lee/
     <td><a href=#control-group-url id=autofilling-form-controls:-the-autocomplete-attribute:control-group-url>URL</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-photo data-dfn-type=attr-value><code>photo</code></dfn>"
     <td>Photograph, icon, or other image corresponding to the company, person, address, or contact information in the other fields associated with this field
     <td> <a id=autofilling-form-controls:-the-autocomplete-attribute:valid-url-string-2 href=https://url.spec.whatwg.org/#valid-url-string data-x-internal=valid-url-string>Valid URL string</a>
     <td>https://www.w3.org/Press/Stock/Berners-Lee/2001-europaeum-eighth.jpg
     <td> <a href=#control-group-url id=autofilling-form-controls:-the-autocomplete-attribute:control-group-url-2>URL</a>
   <tbody><tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-tel data-dfn-type=attr-value><code>tel</code></dfn>"
     <td>Full telephone number, including country code
     <td><a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-3 href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a> and U+0020 SPACE characters, prefixed by a U+002B PLUS SIGN character (+)
     <td>+1 617 253 5702
     <td><a href=#control-group-tel id=autofilling-form-controls:-the-autocomplete-attribute:control-group-tel>Tel</a>
    <tr><td class=non-rectangular-cell-indentation rowspan=6>
      <td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-tel-country-code data-dfn-type=attr-value><code>tel-country-code</code></dfn>"
      <td>Country code component of the telephone number
      <td><a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-4 href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a> prefixed by a U+002B PLUS SIGN character (+)
      <td>+1
      <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-30>Text</a>
    <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-tel-national data-dfn-type=attr-value><code>tel-national</code></dfn>"
      <td>Telephone number without the county code component, with a country-internal prefix applied if applicable
      <td><a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-5 href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a> and U+0020 SPACE characters
      <td>617 253 5702
      <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-31>Text</a>
    <tr><td class=non-rectangular-cell-indentation rowspan=4>
       <td colspan=2>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-tel-area-code data-dfn-type=attr-value><code>tel-area-code</code></dfn>"
       <td>Area code component of the telephone number, with a country-internal prefix applied if applicable
       <td><a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-6 href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a>
       <td>617
       <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-32>Text</a>
    <tr><td colspan=2>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-tel-local data-dfn-type=attr-value><code>tel-local</code></dfn>"
       <td>Telephone number without the country code and area code components
       <td><a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-7 href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a>
       <td>2535702
       <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-33>Text</a>
    <tr><td class=non-rectangular-cell-indentation rowspan=2>
        <td>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-tel-local-prefix data-dfn-type=attr-value><code>tel-local-prefix</code></dfn>"
        <td>First part of the component of the telephone number that follows the area code, when that component is split into two components
        <td><a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-8 href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a>
        <td>253
        <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-34>Text</a>
    <tr><td>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-tel-local-suffix data-dfn-type=attr-value><code>tel-local-suffix</code></dfn>"
        <td>Second part of the component of the telephone number that follows the area code, when that component is split into two components
        <td><a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-9 href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a>
        <td>5702
        <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-35>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-tel-extension data-dfn-type=attr-value><code>tel-extension</code></dfn>"
     <td>Telephone number internal extension code
     <td><a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-10 href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a>
     <td>1000
     <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-36>Text</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-email data-dfn-type=attr-value><code>email</code></dfn>"
     <td>Email address
     <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-e-mail-address href=input.html#valid-e-mail-address>Valid email address</a>
     <td>timbl@w3.org
     <td><a href=#control-group-username id=autofilling-form-controls:-the-autocomplete-attribute:control-group-username-2>Username</a>
    <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-impp data-dfn-type=attr-value><code>impp</code></dfn>"
     <td>URL representing an instant messaging protocol endpoint (for example, "<code>aim:goim?screenname=example</code>" or "<code>xmpp:fred@example.net</code>")
     <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-url-string-3 href=https://url.spec.whatwg.org/#valid-url-string data-x-internal=valid-url-string>Valid URL string</a>
     <td>irc://example.org/timbl,isuser
     <td><a href=#control-group-url id=autofilling-form-controls:-the-autocomplete-attribute:control-group-url-3>URL</a>
  </table>

  <p>The groups correspond to controls as follows:</p>

  <dl><dt><dfn id=control-group-text>Text</dfn>

   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-3><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-2><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#hidden-state-(type=hidden)" id="autofilling-form-controls:-the-autocomplete-attribute:hidden-state-(type=hidden)-2">Hidden</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-4><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-3><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)">Text</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-5><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-4><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-2">Search</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-textarea-element-2><a href=form-elements.html#the-textarea-element>textarea</a></code> elements
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-select-element><a href=form-elements.html#the-select-element>select</a></code> elements

   <dt><dfn id=control-group-multiline>Multiline</dfn>

   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-6><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-5><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#hidden-state-(type=hidden)" id="autofilling-form-controls:-the-autocomplete-attribute:hidden-state-(type=hidden)-3">Hidden</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-textarea-element-3><a href=form-elements.html#the-textarea-element>textarea</a></code> elements
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-select-element-2><a href=form-elements.html#the-select-element>select</a></code> elements

   <dt><dfn id=control-group-password>Password</dfn>

   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-7><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-6><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#hidden-state-(type=hidden)" id="autofilling-form-controls:-the-autocomplete-attribute:hidden-state-(type=hidden)-4">Hidden</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-8><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-7><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-3">Text</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-9><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-8><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-4">Search</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-10><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-9><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#password-state-(type=password)" id="autofilling-form-controls:-the-autocomplete-attribute:password-state-(type=password)">Password</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-textarea-element-4><a href=form-elements.html#the-textarea-element>textarea</a></code> elements
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-select-element-3><a href=form-elements.html#the-select-element>select</a></code> elements

   <dt><dfn id=control-group-url>URL</dfn>

   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-11><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-10><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#hidden-state-(type=hidden)" id="autofilling-form-controls:-the-autocomplete-attribute:hidden-state-(type=hidden)-5">Hidden</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-12><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-11><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-5">Text</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-13><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-12><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-6">Search</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-14><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-13><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#url-state-(type=url)" id="autofilling-form-controls:-the-autocomplete-attribute:url-state-(type=url)">URL</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-textarea-element-5><a href=form-elements.html#the-textarea-element>textarea</a></code> elements
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-select-element-4><a href=form-elements.html#the-select-element>select</a></code> elements

   <dt><dfn id=control-group-username>Username</dfn><span id=control-group-e-mail></span>

   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-15><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-14><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#hidden-state-(type=hidden)" id="autofilling-form-controls:-the-autocomplete-attribute:hidden-state-(type=hidden)-6">Hidden</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-16><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-15><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-7">Text</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-17><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-16><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-8">Search</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-18><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-17><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#email-state-(type=email)" id="autofilling-form-controls:-the-autocomplete-attribute:email-state-(type=email)">Email</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-textarea-element-6><a href=form-elements.html#the-textarea-element>textarea</a></code> elements
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-select-element-5><a href=form-elements.html#the-select-element>select</a></code> elements

   <dt><dfn id=control-group-tel>Tel</dfn>

   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-19><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-18><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#hidden-state-(type=hidden)" id="autofilling-form-controls:-the-autocomplete-attribute:hidden-state-(type=hidden)-7">Hidden</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-20><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-19><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-9">Text</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-21><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-20><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-10">Search</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-22><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-21><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#telephone-state-(type=tel)" id="autofilling-form-controls:-the-autocomplete-attribute:telephone-state-(type=tel)">Telephone</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-textarea-element-7><a href=form-elements.html#the-textarea-element>textarea</a></code> elements
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-select-element-6><a href=form-elements.html#the-select-element>select</a></code> elements

   <dt><dfn id=control-group-numeric>Numeric</dfn>

   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-23><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-22><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#hidden-state-(type=hidden)" id="autofilling-form-controls:-the-autocomplete-attribute:hidden-state-(type=hidden)-8">Hidden</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-24><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-23><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-11">Text</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-25><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-24><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-12">Search</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-26><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-25><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#number-state-(type=number)" id="autofilling-form-controls:-the-autocomplete-attribute:number-state-(type=number)">Number</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-textarea-element-8><a href=form-elements.html#the-textarea-element>textarea</a></code> elements
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-select-element-7><a href=form-elements.html#the-select-element>select</a></code> elements

   <dt><dfn id=control-group-month>Month</dfn>

   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-27><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-26><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#hidden-state-(type=hidden)" id="autofilling-form-controls:-the-autocomplete-attribute:hidden-state-(type=hidden)-9">Hidden</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-28><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-27><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-13">Text</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-29><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-28><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-14">Search</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-30><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-29><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#month-state-(type=month)" id="autofilling-form-controls:-the-autocomplete-attribute:month-state-(type=month)">Month</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-textarea-element-9><a href=form-elements.html#the-textarea-element>textarea</a></code> elements
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-select-element-8><a href=form-elements.html#the-select-element>select</a></code> elements

   <dt><dfn id=control-group-date>Date</dfn>

   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-31><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-30><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#hidden-state-(type=hidden)" id="autofilling-form-controls:-the-autocomplete-attribute:hidden-state-(type=hidden)-10">Hidden</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-32><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-31><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-15">Text</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-33><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-32><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-16">Search</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-34><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-33><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#date-state-(type=date)" id="autofilling-form-controls:-the-autocomplete-attribute:date-state-(type=date)">Date</a> state
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-textarea-element-10><a href=form-elements.html#the-textarea-element>textarea</a></code> elements
   <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-select-element-9><a href=form-elements.html#the-select-element>select</a></code> elements


  </dl>

  <p id=more-on-address-levels><strong>Address levels</strong>: The "<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-level1-2><a href=#attr-fe-autocomplete-address-level1>address-level1</a></code>" – "<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-level4-2><a href=#attr-fe-autocomplete-address-level4>address-level4</a></code>" fields are used to describe
  the locality of the street address. Different locales have different numbers of levels. For
  example, the US uses two levels (state and town), the UK uses one or two depending on the address
  (the post town, and in some cases the locality), and China can use three (province, city,
  district). The "<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-level1-3><a href=#attr-fe-autocomplete-address-level1>address-level1</a></code>" field
  represents the widest administrative division. Different locales order the fields in different
  ways; for example, in the US the town (level 2) precedes the state (level 1); while in Japan the
  prefecture (level 1) precedes the city (level 2) which precedes the district (level 3). Authors
  are encouraged to provide forms that are presented in a way that matches the country's conventions
  (hiding, showing, and rearranging fields accordingly as the user changes the country).</p>


  

  <h6 id=autofill-processing-model><span class=secno>4.10.19.7.2</span> <span id=processing-model-3></span>Processing model<a href=#autofill-processing-model class=self-link></a></h6>

  <p>Each <code id=autofill-processing-model:the-input-element><a href=input.html#the-input-element>input</a></code> element to which the <code id=autofill-processing-model:attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute <a href=input.html#concept-input-apply id=autofill-processing-model:concept-input-apply>applies</a>, each <code id=autofill-processing-model:the-select-element><a href=form-elements.html#the-select-element>select</a></code> element, and each <code id=autofill-processing-model:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code> element, has an
  <dfn id=autofill-hint-set>autofill hint set</dfn>, an <dfn id=autofill-scope>autofill scope</dfn>, an <dfn id=autofill-field-name>autofill field name</dfn>, a
  <dfn id=non-autofill-credential-type>non-autofill credential type</dfn>, and an <dfn id=idl-exposed-autofill-value>IDL-exposed autofill value</dfn>.</p>

  <p>The <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name>autofill field name</a> specifies the specific kind of data expected in the field,
  e.g. "<code id=autofill-processing-model:attr-fe-autocomplete-street-address><a href=#attr-fe-autocomplete-street-address>street-address</a></code>" or "<code id=autofill-processing-model:attr-fe-autocomplete-cc-exp><a href=#attr-fe-autocomplete-cc-exp>cc-exp</a></code>".</p>

  <p>The <a href=#autofill-hint-set id=autofill-processing-model:autofill-hint-set>autofill hint set</a> identifies what address or contact information type the user
  agent is to look at, e.g. "<code id=autofill-processing-model:attr-fe-autocomplete-shipping><a href=#attr-fe-autocomplete-shipping>shipping</a></code> <code id=autofill-processing-model:attr-fe-autocomplete-fax><a href=#attr-fe-autocomplete-fax>fax</a></code>" or "<code id=autofill-processing-model:attr-fe-autocomplete-billing><a href=#attr-fe-autocomplete-billing>billing</a></code>".</p>

  <p>The <a href=#non-autofill-credential-type id=autofill-processing-model:non-autofill-credential-type>non-autofill credential type</a> identifies a type of
  <a href=https://w3c.github.io/webappsec-credential-management/#credential id=autofill-processing-model:credman-credential data-x-internal=credman-credential>credential</a> that may be offered by the user agent when the
  user interacts with the field alongside other <a href=#autofill-field id=autofill-processing-model:autofill-field>autofill field</a> values. If this value is
  "<code>webauthn</code>" instead of null, selecting a credential of that type will resolve
  a pending <code id=autofill-processing-model:conditional-mediation><a data-x-internal=conditional-mediation href=https://w3c.github.io/webappsec-credential-management/#dom-credentialmediationrequirement-conditional>conditional</a></code> mediation
  <code id=autofill-processing-model:navigator.credentials.get()><a data-x-internal=navigator.credentials.get() href=https://w3c.github.io/webappsec-credential-management/#dom-credentialscontainer-get>navigator.credentials.get()</a></code> request, instead of autofilling the field.</p>

  <div class=example>
   <p>For example, a sign-in page could instruct the user agent to either autofill a saved password,
   or show a <a id=autofill-processing-model:public-key-credential href=https://w3c.github.io/webauthn/#public-key-credential data-x-internal=public-key-credential>public key credential</a> that will resolve a pending
   <code id=autofill-processing-model:navigator.credentials.get()-2><a data-x-internal=navigator.credentials.get() href=https://w3c.github.io/webappsec-credential-management/#dom-credentialscontainer-get>navigator.credentials.get()</a></code> request. A user can select either to sign-in.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>password</c-> <c- e>type</c-><c- o>=</c-><c- s>password</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;current-password webauthn&quot;</c-><c- p>&gt;</c-></code></pre>
  </div>

  <p>The <a href=#autofill-scope id=autofill-processing-model:autofill-scope>autofill scope</a> identifies the group of fields whose information concerns the
  same subject, and consists of the <a href=#autofill-hint-set id=autofill-processing-model:autofill-hint-set-2>autofill hint set</a> with, if
  applicable, the "<code>section-*</code>" prefix, e.g. "<code>billing</code>",
  "<code>section-parent shipping</code>", or "<code>section-child shipping
  home</code>".</p>

  <p>These values are defined as the result of running the following algorithm:</p>

  <ol><li><p>If the element has no <code id=autofill-processing-model:attr-fe-autocomplete-2><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute,
   then jump to the step labeled <i>default</i>.<li><p>Let <var>tokens</var> be the result of <a href=https://infra.spec.whatwg.org/#split-on-ascii-whitespace id=autofill-processing-model:split-a-string-on-spaces data-x-internal=split-a-string-on-spaces>splitting the attribute's value on ASCII whitespace</a>.<li><p>If <var>tokens</var> is empty, then jump to the step labeled <i>default</i>.<li><p>Let <var>index</var> be the index of the last token in <var>tokens</var>.<li><p>Let <var>field</var> be the <var>index</var>th token in <var>tokens</var>.<li><p>Set the <var>category</var>, <var>maximum tokens</var> pair to the result of <a href="#determine-a-field's-category" id="autofill-processing-model:determine-a-field's-category">determining a field's category</a> given
   <var>field</var>.<li><p>If <var>category</var> is null, then jump to the step labeled <i>default</i>.<li><p>If the number of tokens in <var>tokens</var> is greater than <var>maximum tokens</var>,
   then jump to the step labeled <i>default</i>.<li><p>If <var>category</var> is Off or Automatic but the element's <code id=autofill-processing-model:attr-fe-autocomplete-3><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute is wearing the <a href=#autofill-anchor-mantle id=autofill-processing-model:autofill-anchor-mantle>autofill anchor
   mantle</a>, then jump to the step labeled <i>default</i>.<li><p>If <var>category</var> is Off, set the element's <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-2>autofill field name</a>
   to the string "<code>off</code>", set its <a href=#autofill-hint-set id=autofill-processing-model:autofill-hint-set-3>autofill hint set</a> to empty, and
   set its <a href=#idl-exposed-autofill-value id=autofill-processing-model:idl-exposed-autofill-value>IDL-exposed autofill value</a> to the string "<code>off</code>". Then,
   return.</p>

   <li><p>If <var>category</var> is Automatic, set the element's <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-3>autofill field
   name</a> to the string "<code>on</code>", set its <a href=#autofill-hint-set id=autofill-processing-model:autofill-hint-set-4>autofill hint set</a> to
   empty, and set its <a href=#idl-exposed-autofill-value id=autofill-processing-model:idl-exposed-autofill-value-2>IDL-exposed autofill value</a> to the string "<code>on</code>". Then, return.</p>

   <li><p>Let <var>scope tokens</var> be an empty list.<li><p>Let <var>hint tokens</var> be an empty set.<li><p>Let <var>credential type</var> be null.<li><p>Let <var>IDL value</var> have the same value as <var>field</var>.<li>
    <p>If <var>category</var> is Credential and the <var>index</var>th token in <var>tokens</var> is
    an <a id=autofill-processing-model:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for "<code id=autofill-processing-model:attr-fe-autocomplete-webauthn><a href=#attr-fe-autocomplete-webauthn>webauthn</a></code>", then run the substeps that follow:</p>
    <ol><li><p>Set <var>credential type</var> to "<code>webauthn</code>".<li><p>If the <var>index</var>th token in <var>tokens</var> is the first entry,
     then skip to the step labeled <i>done</i>.<li><p>Decrement <var>index</var> by one.<li><p>Set the <var>category</var>, <var>maximum tokens</var> pair to the result of <a href="#determine-a-field's-category" id="autofill-processing-model:determine-a-field's-category-2">determining a field's category</a> given
     the <var>index</var>th token in <var>tokens</var>.<li><p>If <var>category</var> is not Normal and <var>category</var> is not Contact, then jump to
     the step labeled <i>default</i>.<li><p>If <var>index</var> is greater than <var>maximum tokens</var> minus one (i.e. if the
     number of remaining tokens is greater than <var>maximum tokens</var>), then jump to the step
     labeled <i>default</i>.<li><p>Set <var>IDL value</var> to the concatenation of the <var>index</var>th token in
     <var>tokens</var>, a U+0020 SPACE character, and the previous value of <var>IDL
     value</var>.</ol>
   <li><p>If the <var>index</var>th token in <var>tokens</var> is the first entry,
   then skip to the step labeled <i>done</i>.<li><p>Decrement <var>index</var> by one.<li>
    <p>If <var>category</var> is Contact and the <var>index</var>th token in <var>tokens</var> is an <a id=autofill-processing-model:ascii-case-insensitive-2 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for one of the strings in
    the following list, then run the substeps that follow:</p>

    <ul class=brief><li>"<code id=autofill-processing-model:attr-fe-autocomplete-home><a href=#attr-fe-autocomplete-home>home</a></code>"
     <li>"<code id=autofill-processing-model:attr-fe-autocomplete-work><a href=#attr-fe-autocomplete-work>work</a></code>"
     <li>"<code id=autofill-processing-model:attr-fe-autocomplete-mobile><a href=#attr-fe-autocomplete-mobile>mobile</a></code>"
     <li>"<code id=autofill-processing-model:attr-fe-autocomplete-fax-2><a href=#attr-fe-autocomplete-fax>fax</a></code>"
     <li>"<code id=autofill-processing-model:attr-fe-autocomplete-pager><a href=#attr-fe-autocomplete-pager>pager</a></code>"
    </ul>

    <p>The substeps are:</p>

    <ol><li><p>Let <var>contact</var> be the matching string from the list above.<li><p>Insert <var>contact</var> at the start of <var>scope
     tokens</var>.<li><p>Add <var>contact</var> to <var>hint tokens</var>.<li><p>Let <var>IDL value</var> be the concatenation of <var>contact</var>, a
     U+0020 SPACE character, and the previous value of <var>IDL value</var>.<li><p>If the <var>index</var>th entry in <var>tokens</var> is the first
     entry, then skip to the step labeled <i>done</i>.<li><p>Decrement <var>index</var> by one.</ol>
   <li>
    <p>If the <var>index</var>th token in <var>tokens</var> is an <a id=autofill-processing-model:ascii-case-insensitive-3 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII
    case-insensitive</a> match for one of the strings in the following list, then run the
    substeps that follow:</p>

    <ul class=brief><li>"<code id=autofill-processing-model:attr-fe-autocomplete-shipping-2><a href=#attr-fe-autocomplete-shipping>shipping</a></code>"
     <li>"<code id=autofill-processing-model:attr-fe-autocomplete-billing-2><a href=#attr-fe-autocomplete-billing>billing</a></code>"
    </ul>

    <p>The substeps are:</p>

    <ol><li><p>Let <var>mode</var> be the matching string from the list above.<li><p>Insert <var>mode</var> at the start of <var>scope
     tokens</var>.<li><p>Add <var>mode</var> to <var>hint tokens</var>.<li><p>Let <var>IDL value</var> be the concatenation of <var>mode</var>, a
     U+0020 SPACE character, and the previous value of <var>IDL value</var>.<li><p>If the <var>index</var>th entry in <var>tokens</var> is the first
     entry, then skip to the step labeled <i>done</i>.<li><p>Decrement <var>index</var> by one.</ol>
   <li><p>If the <var>index</var>th entry in <var>tokens</var> is not the first entry, then jump to
   the step labeled <i>default</i>.<li><p>If the first eight characters of the <var>index</var>th token in <var>tokens</var> are not
   an <a id=autofill-processing-model:ascii-case-insensitive-4 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code id=autofill-processing-model:attr-fe-autocomplete-section><a href=#attr-fe-autocomplete-section>section-</a></code>", then jump to the step labeled
   <i>default</i>.<li><p>Let <var>section</var> be the <var>index</var>th token in <var>tokens</var>,
   <a id=autofill-processing-model:converted-to-ascii-lowercase href=https://infra.spec.whatwg.org/#ascii-lowercase data-x-internal=converted-to-ascii-lowercase>converted to ASCII lowercase</a>.<li><p>Insert <var>section</var> at the start of <var>scope tokens</var>.<li><p>Let <var>IDL value</var> be the concatenation of <var>section</var>, a U+0020 SPACE
   character, and the previous value of <var>IDL value</var>.<li><p><i>Done</i>: Set the element's <a href=#autofill-hint-set id=autofill-processing-model:autofill-hint-set-5>autofill hint set</a> to <var>hint
   tokens</var>.</p>

   <li><p>Set the element's <a href=#non-autofill-credential-type id=autofill-processing-model:non-autofill-credential-type-2>non-autofill credential type</a> to <var>credential
   type</var>.<li><p>Set the element's <a href=#autofill-scope id=autofill-processing-model:autofill-scope-2>autofill scope</a> to <var>scope tokens</var>.</p>

   <li><p>Set the element's <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-4>autofill field name</a> to <var>field</var>.</p>

   <li><p>Set the element's <a href=#idl-exposed-autofill-value id=autofill-processing-model:idl-exposed-autofill-value-3>IDL-exposed autofill value</a> to <var>IDL value</var>.</p>

   <li><p>Return.<li><p><i>Default</i>: Set the element's <a href=#idl-exposed-autofill-value id=autofill-processing-model:idl-exposed-autofill-value-4>IDL-exposed autofill value</a> to the empty
   string, and its <a href=#autofill-hint-set id=autofill-processing-model:autofill-hint-set-6>autofill hint set</a> and <a href=#autofill-scope id=autofill-processing-model:autofill-scope-3>autofill scope</a> to empty.<li><p>If the element's <code id=autofill-processing-model:attr-fe-autocomplete-4><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute is
   wearing the <a href=#autofill-anchor-mantle id=autofill-processing-model:autofill-anchor-mantle-2>autofill anchor mantle</a>, then set the element's <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-5>autofill field
   name</a> to the empty string and return.<li><p>Let <var>form</var> be the element's <a href=#form-owner id=autofill-processing-model:form-owner>form owner</a>, if any, or null
   otherwise.<li>
    <p>If <var>form</var> is not null and <var>form</var>'s <code id=autofill-processing-model:attr-form-autocomplete><a href=forms.html#attr-form-autocomplete>autocomplete</a></code> attribute is in the <a href=forms.html#attr-form-autocomplete-off-state id=autofill-processing-model:attr-form-autocomplete-off-state>Off</a> state, then set the element's
    <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-6>autofill field name</a> to "<code id=autofill-processing-model:attr-fe-autocomplete-off><a href=#attr-fe-autocomplete-off>off</a></code>".</p>

    <p>Otherwise, set the element's <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-7>autofill field name</a> to "<code id=autofill-processing-model:attr-fe-autocomplete-on><a href=#attr-fe-autocomplete-on>on</a></code>".</p>
   </ol>

  <p>To <dfn id="determine-a-field's-category">determine a field's category</dfn>, given <var>field</var>:</p>

  <ol><li>
    <p>If the <var>field</var> is not an <a id=autofill-processing-model:ascii-case-insensitive-5 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for one of the
    tokens given in the first column of the following table, return the pair (null, null).</p>

    <table><thead><tr><th>Token
       <th>Maximum number of tokens
       <th>Category
     <tbody><tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-off-2><a href=#attr-fe-autocomplete-off>off</a></code>"
       <td>1
       <td>Off
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-on-2><a href=#attr-fe-autocomplete-on>on</a></code>"
       <td>1
       <td>Automatic
     <tbody><tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-name><a href=#attr-fe-autocomplete-name>name</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-honorific-prefix><a href=#attr-fe-autocomplete-honorific-prefix>honorific-prefix</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-given-name><a href=#attr-fe-autocomplete-given-name>given-name</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-additional-name><a href=#attr-fe-autocomplete-additional-name>additional-name</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-family-name><a href=#attr-fe-autocomplete-family-name>family-name</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-honorific-suffix><a href=#attr-fe-autocomplete-honorific-suffix>honorific-suffix</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-nickname><a href=#attr-fe-autocomplete-nickname>nickname</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-organization-title><a href=#attr-fe-autocomplete-organization-title>organization-title</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-username><a href=#attr-fe-autocomplete-username>username</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-new-password><a href=#attr-fe-autocomplete-new-password>new-password</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-current-password><a href=#attr-fe-autocomplete-current-password>current-password</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-one-time-code><a href=#attr-fe-autocomplete-one-time-code>one-time-code</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-organization><a href=#attr-fe-autocomplete-organization>organization</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-street-address-2><a href=#attr-fe-autocomplete-street-address>street-address</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-address-line1><a href=#attr-fe-autocomplete-address-line1>address-line1</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-address-line2><a href=#attr-fe-autocomplete-address-line2>address-line2</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-address-line3><a href=#attr-fe-autocomplete-address-line3>address-line3</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-address-level4><a href=#attr-fe-autocomplete-address-level4>address-level4</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-address-level3><a href=#attr-fe-autocomplete-address-level3>address-level3</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-address-level2><a href=#attr-fe-autocomplete-address-level2>address-level2</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-address-level1><a href=#attr-fe-autocomplete-address-level1>address-level1</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-country><a href=#attr-fe-autocomplete-country>country</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-country-name><a href=#attr-fe-autocomplete-country-name>country-name</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-postal-code><a href=#attr-fe-autocomplete-postal-code>postal-code</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-cc-name><a href=#attr-fe-autocomplete-cc-name>cc-name</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-cc-given-name><a href=#attr-fe-autocomplete-cc-given-name>cc-given-name</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-cc-additional-name><a href=#attr-fe-autocomplete-cc-additional-name>cc-additional-name</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-cc-family-name><a href=#attr-fe-autocomplete-cc-family-name>cc-family-name</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-cc-number><a href=#attr-fe-autocomplete-cc-number>cc-number</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-cc-exp-2><a href=#attr-fe-autocomplete-cc-exp>cc-exp</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-cc-exp-month><a href=#attr-fe-autocomplete-cc-exp-month>cc-exp-month</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-cc-exp-year><a href=#attr-fe-autocomplete-cc-exp-year>cc-exp-year</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-cc-csc><a href=#attr-fe-autocomplete-cc-csc>cc-csc</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-cc-type><a href=#attr-fe-autocomplete-cc-type>cc-type</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-transaction-currency><a href=#attr-fe-autocomplete-transaction-currency>transaction-currency</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-transaction-amount><a href=#attr-fe-autocomplete-transaction-amount>transaction-amount</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-language><a href=#attr-fe-autocomplete-language>language</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-bday><a href=#attr-fe-autocomplete-bday>bday</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-bday-day><a href=#attr-fe-autocomplete-bday-day>bday-day</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-bday-month><a href=#attr-fe-autocomplete-bday-month>bday-month</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-bday-year><a href=#attr-fe-autocomplete-bday-year>bday-year</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-sex><a href=#attr-fe-autocomplete-sex>sex</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-url><a href=#attr-fe-autocomplete-url>url</a></code>"
       <td>3
       <td>Normal
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-photo><a href=#attr-fe-autocomplete-photo>photo</a></code>"
       <td>3
       <td>Normal
     <tbody><tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-tel><a href=#attr-fe-autocomplete-tel>tel</a></code>"
       <td>4
       <td>Contact
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-tel-country-code><a href=#attr-fe-autocomplete-tel-country-code>tel-country-code</a></code>"
       <td>4
       <td>Contact
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-tel-national><a href=#attr-fe-autocomplete-tel-national>tel-national</a></code>"
       <td>4
       <td>Contact
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-tel-area-code><a href=#attr-fe-autocomplete-tel-area-code>tel-area-code</a></code>"
       <td>4
       <td>Contact
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-tel-local><a href=#attr-fe-autocomplete-tel-local>tel-local</a></code>"
       <td>4
       <td>Contact
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-tel-local-prefix><a href=#attr-fe-autocomplete-tel-local-prefix>tel-local-prefix</a></code>"
       <td>4
       <td>Contact
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-tel-local-suffix><a href=#attr-fe-autocomplete-tel-local-suffix>tel-local-suffix</a></code>"
       <td>4
       <td>Contact
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-tel-extension><a href=#attr-fe-autocomplete-tel-extension>tel-extension</a></code>"
       <td>4
       <td>Contact
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-email><a href=#attr-fe-autocomplete-email>email</a></code>"
       <td>4
       <td>Contact
      <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-impp><a href=#attr-fe-autocomplete-impp>impp</a></code>"
       <td>4
       <td>Contact
     <tbody><tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-webauthn-2><a href=#attr-fe-autocomplete-webauthn>webauthn</a></code>"
       <td>5
       <td>Credential
    </table>
   <li><p>Otherwise, let <var>maximum tokens</var> and <var>category</var> be the values of the
   cells in the second and third columns of that row respectively.<li><p>Return the pair (<var>category</var>, <var>maximum tokens</var>).</ol>

  <hr>

  <p>For the purposes of autofill, a <dfn id="control's-data">control's data</dfn> depends on the kind of control:</p>

  <dl><dt>An <code id=autofill-processing-model:the-input-element-2><a href=input.html#the-input-element>input</a></code> element with its <code id=autofill-processing-model:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute
   in the <a href="input.html#email-state-(type=email)" id="autofill-processing-model:email-state-(type=email)">Email</a> state and with the <code id=autofill-processing-model:attr-input-multiple><a href=input.html#attr-input-multiple>multiple</a></code> attribute specified<dd>The element's <a href=#concept-fe-values id=autofill-processing-model:concept-fe-values>value<em>s</em></a>.<dt>Any other <code id=autofill-processing-model:the-input-element-3><a href=input.html#the-input-element>input</a></code> element<dt>A <code id=autofill-processing-model:the-textarea-element-2><a href=form-elements.html#the-textarea-element>textarea</a></code> element<dd>The element's <a href=#concept-fe-value id=autofill-processing-model:concept-fe-value>value</a>.<dt>A <code id=autofill-processing-model:the-select-element-2><a href=form-elements.html#the-select-element>select</a></code> element with its <code id=autofill-processing-model:attr-select-multiple><a href=form-elements.html#attr-select-multiple>multiple</a></code>
   attribute specified<dd>The <code id=autofill-processing-model:the-option-element><a href=form-elements.html#the-option-element>option</a></code> elements in the <code id=autofill-processing-model:the-select-element-3><a href=form-elements.html#the-select-element>select</a></code> element's <a href=form-elements.html#concept-select-option-list id=autofill-processing-model:concept-select-option-list>list of options</a> that have their <a href=form-elements.html#concept-option-selectedness id=autofill-processing-model:concept-option-selectedness>selectedness</a> set to true.<dt>Any other <code id=autofill-processing-model:the-select-element-4><a href=form-elements.html#the-select-element>select</a></code> element<dd>The <code id=autofill-processing-model:the-option-element-2><a href=form-elements.html#the-option-element>option</a></code> element in the <code id=autofill-processing-model:the-select-element-5><a href=form-elements.html#the-select-element>select</a></code> element's <a href=form-elements.html#concept-select-option-list id=autofill-processing-model:concept-select-option-list-2>list of options</a> that has its <a href=form-elements.html#concept-option-selectedness id=autofill-processing-model:concept-option-selectedness-2>selectedness</a> set to true.</dl>

  <hr>

  <p>How to process the <a href=#autofill-hint-set id=autofill-processing-model:autofill-hint-set-7>autofill hint set</a>, <a href=#autofill-scope id=autofill-processing-model:autofill-scope-4>autofill scope</a>, and
  <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-8>autofill field name</a> depends on the mantle that the <code id=autofill-processing-model:attr-fe-autocomplete-5><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute is wearing.</p>

  <dl class=switch><dt>When wearing the <a href=#autofill-expectation-mantle id=autofill-processing-model:autofill-expectation-mantle>autofill expectation mantle</a>...

   <dd>
    <p>When an element's <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-9>autofill field name</a> is "<code id=autofill-processing-model:attr-fe-autocomplete-off-3><a href=#attr-fe-autocomplete-off>off</a></code>", the user agent should not remember the <a href="#control's-data" id="autofill-processing-model:control's-data">control's
    data</a>, and should not offer past values to the user.</p>

    <p class=note>In addition, when an element's <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-10>autofill field name</a> is "<code id=autofill-processing-model:attr-fe-autocomplete-off-4><a href=#attr-fe-autocomplete-off>off</a></code>", <a href=browsing-the-web.html#history-autocomplete>values are
    reset</a> when <a href=browsing-the-web.html#reactivate-a-document id=autofill-processing-model:reactivate-a-document>reactivating a document</a>.</p>

    <div class=example>

     <p>Banks frequently do not want UAs to prefill login information:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Account: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;text&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;ac&quot;</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;off&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->PIN: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;password&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;pin&quot;</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;off&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

    </div>

    <p>When an element's <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-11>autofill field name</a> is <em>not</em> "<code id=autofill-processing-model:attr-fe-autocomplete-off-5><a href=#attr-fe-autocomplete-off>off</a></code>", the user agent may store the <a href="#control's-data" id="autofill-processing-model:control's-data-2">control's
    data</a>, and may offer previously stored values to the user.</p>

    <div class=example>

     <p>For example, suppose a user visits a page with this control:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>select</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;country&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->Afghanistan
 <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->Albania
 <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->Algeria
 <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->Andorra
 <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->Angola
 <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->Antigua and Barbuda
 <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->Argentina
 <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->Armenia
 <c- c>&lt;!-- </c-><em><c- c>...</c-></em><c- c> --&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->Yemen
 <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->Zambia
 <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->Zimbabwe
<c- p>&lt;/</c-><c- f>select</c-><c- p>&gt;</c-></code></pre>

     <p>This might render as follows:</p>

     <p><img src=../images/select-country-1.png alt="A drop-down control with a long alphabetical list of countries."></p>

     <p>Suppose that on the first visit to this page, the user selects "Zambia". On the second visit,
     the user agent could duplicate the entry for Zambia at the top of the list, so that the interface
     instead looks like this:</p>

     <p><img src=../images/select-country-2.png alt="The same drop-down control with the alphabetical list of countries, but with Zambia as an entry at the top."></p>

    </div>

    <p>When the <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-12>autofill field name</a> is "<code id=autofill-processing-model:attr-fe-autocomplete-on-3><a href=#attr-fe-autocomplete-on>on</a></code>", the user agent should attempt to use heuristics to
    determine the most appropriate values to offer the user, e.g. based on the element's <code id=autofill-processing-model:attr-fe-name><a href=#attr-fe-name>name</a></code> value, the position of the element in its <a id=autofill-processing-model:tree href=https://dom.spec.whatwg.org/#concept-tree data-x-internal=tree>tree</a>,
    what other fields exist in the form, and so forth.</p>

    <p>When the <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-13>autofill field name</a> is one of the names of the <a href=#autofill-field id=autofill-processing-model:autofill-field-2>autofill fields</a> described above, the user agent should provide suggestions that
    match the meaning of the field name as given in the table earlier in this section. The
    <a href=#autofill-hint-set id=autofill-processing-model:autofill-hint-set-8>autofill hint set</a> should be used to select amongst multiple possible suggestions.</p>

    <p class=example>For example, if a user once entered one address into fields that used the
    "<code id=autofill-processing-model:attr-fe-autocomplete-shipping-3><a href=#attr-fe-autocomplete-shipping>shipping</a></code>" keyword, and another address into
    fields that used the "<code id=autofill-processing-model:attr-fe-autocomplete-billing-3><a href=#attr-fe-autocomplete-billing>billing</a></code>" keyword, then in
    subsequent forms only the first address would be suggested for form controls whose <a href=#autofill-hint-set id=autofill-processing-model:autofill-hint-set-9>autofill
    hint set</a> contains the keyword "<code id=autofill-processing-model:attr-fe-autocomplete-shipping-4><a href=#attr-fe-autocomplete-shipping>shipping</a></code>". Both addresses might be suggested,
    however, for address-related form controls whose <a href=#autofill-hint-set id=autofill-processing-model:autofill-hint-set-10>autofill hint set</a> does not contain
    either keyword.</p>
   <dt>When wearing the <a href=#autofill-anchor-mantle id=autofill-processing-model:autofill-anchor-mantle-3>autofill anchor mantle</a>...

   <dd>
    <p>When the <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-14>autofill field name</a> is not the empty string, then the user agent must
    act as if the user had specified the <a href="#control's-data" id="autofill-processing-model:control's-data-3">control's data</a> for the given <a href=#autofill-hint-set id=autofill-processing-model:autofill-hint-set-11>autofill
    hint set</a>, <a href=#autofill-scope id=autofill-processing-model:autofill-scope-5>autofill scope</a>, and <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-15>autofill field name</a>
    combination.</p>
   </dl>

  <p>When the user agent <dfn id=concept-fe-autofill>autofills form controls</dfn>, elements
  with the same <a href=#form-owner id=autofill-processing-model:form-owner-2>form owner</a> and the same <a href=#autofill-scope id=autofill-processing-model:autofill-scope-6>autofill scope</a> must use data
  relating to the same person, address, payment instrument, and contact details. <span id=autofill-country>When a user agent autofills "<code id=autofill-processing-model:attr-fe-autocomplete-country-2><a href=#attr-fe-autocomplete-country>country</a></code>" and "<code id=autofill-processing-model:attr-fe-autocomplete-country-name-2><a href=#attr-fe-autocomplete-country-name>country-name</a></code>" fields with the same <a href=#form-owner id=autofill-processing-model:form-owner-3>form
  owner</a> and <a href=#autofill-scope id=autofill-processing-model:autofill-scope-7>autofill scope</a>, and the user agent has a value for the <code id=autofill-processing-model:attr-fe-autocomplete-country-3><a href=#attr-fe-autocomplete-country>country</a></code>" field(s), then the "<code id=autofill-processing-model:attr-fe-autocomplete-country-name-3><a href=#attr-fe-autocomplete-country-name>country-name</a></code>" field(s) must be filled using a
  human-readable name for the same country.</span> When a user agent fills in multiple fields at
  once, all fields with the same <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-16>autofill field name</a>, <a href=#form-owner id=autofill-processing-model:form-owner-4>form owner</a>, and
  <a href=#autofill-scope id=autofill-processing-model:autofill-scope-8>autofill scope</a> must be filled with the same value.</p>

  <p class=example>Suppose a user agent knows of two phone numbers, +1 555 123 1234 and +1 555 666
  7777. It would not be conforming for the user agent to fill a field with <code>autocomplete="shipping tel-local-prefix"</code> with the value "123" and another field
  in the same form with <code>autocomplete="shipping tel-local-suffix"</code> with the
  value "7777". The only valid prefilled values given the aforementioned information would be "123"
  and "1234", or "666" and "7777", respectively.</p>

  <p class=example>Similarly, if a form for some reason contained both a "<code id=autofill-processing-model:attr-fe-autocomplete-cc-exp-3><a href=#attr-fe-autocomplete-cc-exp>cc-exp</a></code>" field and a "<code id=autofill-processing-model:attr-fe-autocomplete-cc-exp-month-2><a href=#attr-fe-autocomplete-cc-exp-month>cc-exp-month</a></code>" field, and the user agent
  prefilled the form, then the month component of the former would have to match the latter.</p>

  <div class=example>

   <p>This requirement interacts with the <a href=#autofill-anchor-mantle id=autofill-processing-model:autofill-anchor-mantle-4>autofill anchor mantle</a> also. Consider the
   following markup snippet:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>hidden</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;nickname&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;TreePlate&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>text</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;nickname&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

   <p>The only value that a conforming user agent could suggest in the text control is "TreePlate",
   the value given by the hidden <code id=autofill-processing-model:the-input-element-4><a href=input.html#the-input-element>input</a></code> element.</p>

  </div>

  <p>The "<code>section-*</code>" tokens in the <a href=#autofill-scope id=autofill-processing-model:autofill-scope-9>autofill scope</a> are opaque;
  user agents must not attempt to derive meaning from the precise values of these tokens.</p>

  <p class=example>For example, it would not be conforming if the user agent decided that it
  should offer the address it knows to be the user's daughter's address for
  "<code>section-child</code>" and the addresses it knows to be the user's spouses'
  addresses for "<code>section-spouse</code>".</p>

  <p>The autocompletion mechanism must be implemented by the user agent acting as if the user had
  modified the <a href="#control's-data" id="autofill-processing-model:control's-data-4">control's data</a>, and must be done at a time where the element is <i id=autofill-processing-model:concept-fe-mutable><a href=#concept-fe-mutable>mutable</a></i> (e.g. just after the element has been inserted into the
  document, or when the user agent <a href=parsing.html#stop-parsing id=autofill-processing-model:stop-parsing>stops parsing</a>). User agents
  must only prefill controls using values that the user could have entered.</p>

  <p class=example>For example, if a <code id=autofill-processing-model:the-select-element-6><a href=form-elements.html#the-select-element>select</a></code> element only has <code id=autofill-processing-model:the-option-element-3><a href=form-elements.html#the-option-element>option</a></code>
  elements with values "Steve" and "Rebecca", "Jay", and "Bob", and has an <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-17>autofill field
  name</a> "<code id=autofill-processing-model:attr-fe-autocomplete-given-name-2><a href=#attr-fe-autocomplete-given-name>given-name</a></code>", but the user
  agent's only idea for what to prefill the field with is "Evan", then the user agent cannot prefill
  the field. It would not be conforming to somehow set the <code id=autofill-processing-model:the-select-element-7><a href=form-elements.html#the-select-element>select</a></code> element to the value
  "Evan", since the user could not have done so themselves.</p>

  <p>A user agent prefilling a form control must not discriminate between form controls that are
  <a id=autofill-processing-model:in-a-document-tree href=https://dom.spec.whatwg.org/#in-a-document-tree data-x-internal=in-a-document-tree>in a document tree</a> and those that are <a id=autofill-processing-model:connected href=https://dom.spec.whatwg.org/#connected data-x-internal=connected>connected</a>; that is, it is not
  conforming to make the decision on whether or not to autofill based on whether the element's
  <a id=autofill-processing-model:root href=https://dom.spec.whatwg.org/#concept-tree-root data-x-internal=root>root</a> is a <a id=autofill-processing-model:shadow-root href=https://dom.spec.whatwg.org/#concept-shadow-root data-x-internal=shadow-root>shadow root</a> versus a <code id=autofill-processing-model:document><a href=dom.html#document>Document</a></code>.</p>

  <p>A user agent prefilling a form control's <a href=#concept-fe-value id=autofill-processing-model:concept-fe-value-2>value</a> must not
  cause that control to <a href=#suffering-from-a-type-mismatch id=autofill-processing-model:suffering-from-a-type-mismatch>suffer from a type
  mismatch</a>, <a href=#suffering-from-being-too-long id=autofill-processing-model:suffering-from-being-too-long>suffer from being too long</a>,
  <a href=#suffering-from-being-too-short id=autofill-processing-model:suffering-from-being-too-short>suffer from being too short</a>, <a href=#suffering-from-an-underflow id=autofill-processing-model:suffering-from-an-underflow>suffer from an underflow</a>, <a href=#suffering-from-an-overflow id=autofill-processing-model:suffering-from-an-overflow>suffer from an overflow</a>, or <a href=#suffering-from-a-step-mismatch id=autofill-processing-model:suffering-from-a-step-mismatch>suffer from a step mismatch</a>. A user agent prefilling a form control's <a href=#concept-fe-value id=autofill-processing-model:concept-fe-value-3>value</a> must not cause that control to <a href=#suffering-from-a-pattern-mismatch id=autofill-processing-model:suffering-from-a-pattern-mismatch>suffer from a pattern mismatch</a> either. Where possible given the
  control's constraints, user agents must use the format given as canonical in the aforementioned
  table. Where it's not possible for the canonical format to be used, user agents should use
  heuristics to attempt to convert values so that they can be used.</p>

  <div class=example>

   <p>For example, if the user agent knows that the user's middle name is "Ines", and attempts to
   prefill a form control that looks like this:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>middle-initial</c-> <c- e>maxlength</c-><c- o>=</c-><c- s>1</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;additional-name&quot;</c-><c- p>&gt;</c-></code></pre>

   <p>...then the user agent could convert "Ines" to "I" and prefill it that way.</p>

  </div>

  <div class=example>

   <p>A more elaborate example would be with month values. If the user agent knows that the user's
   birthday is the 27th of July 2012, then it might try to prefill all of the following controls
   with slightly different values, all driven from this information:</p>

   <table><tr><td>
      <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>b</c-> <c- e>type</c-><c- o>=</c-><c- s>month</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;bday&quot;</c-><c- p>&gt;</c-></code></pre>
     <td>
      2012-07
     <td>
      The day is dropped since the <a href="input.html#month-state-(type=month)" id="autofill-processing-model:month-state-(type=month)">Month</a> state only accepts a
      month/year combination. (Note that this example is non-conforming, because the <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-18>autofill
      field name</a> <code id=autofill-processing-model:attr-fe-autocomplete-bday-2><a href=#attr-fe-autocomplete-bday>bday</a></code> is not allowed with the
      <a href="input.html#month-state-(type=month)" id="autofill-processing-model:month-state-(type=month)-2">Month</a> state.)
    <tr><td>
      <pre><code class='html'><c- p>&lt;</c-><c- f>select</c-> <c- e>name</c-><c- o>=</c-><c- s>c</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;bday&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->Jan
 <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->Feb
 <em>...</em>
 <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->Jul
 <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->Aug
 <em>...</em>
<c- p>&lt;/</c-><c- f>select</c-><c- p>&gt;</c-></code></pre>
     <td>
      July
     <td>
      The user agent picks the month from the listed options, either by noticing there are twelve
      options and picking the 7th, or by recognizing that one of the strings (three characters "Jul"
      followed by a newline and a space) is a close match for the name of the month (July) in one of
      the user agent's supported languages, or through some other similar mechanism.
    <tr><td>
      <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>a</c-> <c- e>type</c-><c- o>=</c-><c- s>number</c-> <c- e>min</c-><c- o>=</c-><c- s>1</c-> <c- e>max</c-><c- o>=</c-><c- s>12</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;bday-month&quot;</c-><c- p>&gt;</c-></code></pre>
     <td>
      7
     <td>
      User agent converts "July" to a month number in the range 1..12, like the field.
    <tr><td>
      <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>a</c-> <c- e>type</c-><c- o>=</c-><c- s>number</c-> <c- e>min</c-><c- o>=</c-><c- s>0</c-> <c- e>max</c-><c- o>=</c-><c- s>11</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;bday-month&quot;</c-><c- p>&gt;</c-></code></pre>
     <td>
      6
     <td>
      User agent converts "July" to a month number in the range 0..11, like the field.
    <tr><td>
      <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>a</c-> <c- e>type</c-><c- o>=</c-><c- s>number</c-> <c- e>min</c-><c- o>=</c-><c- s>1</c-> <c- e>max</c-><c- o>=</c-><c- s>11</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>&quot;bday-month&quot;</c-><c- p>&gt;</c-></code></pre>
     <td>
     <td>
      User agent doesn't fill in the field, since it can't make a good guess as to what the form expects.
   </table>

  </div>

  <p>A user agent may allow the user to override an element's <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-19>autofill field name</a>, e.g.
  to change it from "<code id=autofill-processing-model:attr-fe-autocomplete-off-6><a href=#attr-fe-autocomplete-off>off</a></code>" to "<code id=autofill-processing-model:attr-fe-autocomplete-on-4><a href=#attr-fe-autocomplete-on>on</a></code>" to allow values to be remembered and prefilled despite
  the page author's objections, or to always "<code id=autofill-processing-model:attr-fe-autocomplete-off-7><a href=#attr-fe-autocomplete-off>off</a></code>",
  never remembering values.</p>

  <p>More specifically, user agents may in particular consider replacing the <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-20>autofill field
  name</a> of form controls that match the description given in the first column of the following
  table, when their <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-21>autofill field name</a> is either "<code id=autofill-processing-model:attr-fe-autocomplete-on-5><a href=#attr-fe-autocomplete-on>on</a></code>" or "<code id=autofill-processing-model:attr-fe-autocomplete-off-8><a href=#attr-fe-autocomplete-off>off</a></code>", with the value given in the second cell of that
  row. If this table is used, the replacements must be done in <a id=autofill-processing-model:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>, since all
  but the first row references the <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-22>autofill field name</a> of earlier elements. When the
  descriptions below refer to form controls being preceded or followed by others, they mean in the
  list of <a href=forms.html#category-listed id=autofill-processing-model:category-listed>listed elements</a> that share the same <a href=#form-owner id=autofill-processing-model:form-owner-5>form
  owner</a>.</p>

  <table><thead><tr><th>Form control
     <th>New <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-23>autofill field name</a>

   <tbody><tr><td>

      an <code id=autofill-processing-model:the-input-element-5><a href=input.html#the-input-element>input</a></code> element whose <code id=autofill-processing-model:attr-input-type-2><a href=input.html#attr-input-type>type</a></code> attribute is in
      the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofill-processing-model:text-(type=text)-state-and-search-state-(type=search)">Text</a> state that is followed by an
      <code id=autofill-processing-model:the-input-element-6><a href=input.html#the-input-element>input</a></code> element whose <code id=autofill-processing-model:attr-input-type-3><a href=input.html#attr-input-type>type</a></code> attribute is in
      the <a href="input.html#password-state-(type=password)" id="autofill-processing-model:password-state-(type=password)">Password</a> state

     <td>

      "<code id=autofill-processing-model:attr-fe-autocomplete-username-2><a href=#attr-fe-autocomplete-username>username</a></code>"


    <tr><td>

      an <code id=autofill-processing-model:the-input-element-7><a href=input.html#the-input-element>input</a></code> element whose <code id=autofill-processing-model:attr-input-type-4><a href=input.html#attr-input-type>type</a></code> attribute is in
      the <a href="input.html#password-state-(type=password)" id="autofill-processing-model:password-state-(type=password)-2">Password</a> state that is preceded by an
      <code id=autofill-processing-model:the-input-element-8><a href=input.html#the-input-element>input</a></code> element whose <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-24>autofill field name</a> is "<code id=autofill-processing-model:attr-fe-autocomplete-username-3><a href=#attr-fe-autocomplete-username>username</a></code>"

     <td>

      "<code id=autofill-processing-model:attr-fe-autocomplete-current-password-2><a href=#attr-fe-autocomplete-current-password>current-password</a></code>"


    <tr><td>

      an <code id=autofill-processing-model:the-input-element-9><a href=input.html#the-input-element>input</a></code> element whose <code id=autofill-processing-model:attr-input-type-5><a href=input.html#attr-input-type>type</a></code> attribute is in
      the <a href="input.html#password-state-(type=password)" id="autofill-processing-model:password-state-(type=password)-3">Password</a> state that is preceded by an
      <code id=autofill-processing-model:the-input-element-10><a href=input.html#the-input-element>input</a></code> element whose <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-25>autofill field name</a> is "<code id=autofill-processing-model:attr-fe-autocomplete-current-password-3><a href=#attr-fe-autocomplete-current-password>current-password</a></code>"

     <td>

      "<code id=autofill-processing-model:attr-fe-autocomplete-new-password-2><a href=#attr-fe-autocomplete-new-password>new-password</a></code>"


    <tr><td>

      an <code id=autofill-processing-model:the-input-element-11><a href=input.html#the-input-element>input</a></code> element whose <code id=autofill-processing-model:attr-input-type-6><a href=input.html#attr-input-type>type</a></code> attribute is in
      the <a href="input.html#password-state-(type=password)" id="autofill-processing-model:password-state-(type=password)-4">Password</a> state that is preceded by an
      <code id=autofill-processing-model:the-input-element-12><a href=input.html#the-input-element>input</a></code> element whose <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-26>autofill field name</a> is "<code id=autofill-processing-model:attr-fe-autocomplete-new-password-3><a href=#attr-fe-autocomplete-new-password>new-password</a></code>"

     <td>

      "<code id=autofill-processing-model:attr-fe-autocomplete-new-password-4><a href=#attr-fe-autocomplete-new-password>new-password</a></code>"


  </table>

  <p>The <dfn data-dfn-for=HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement id=dom-fe-autocomplete data-dfn-type=attribute><code>autocomplete</code></dfn> IDL attribute, on getting, must return the
  element's <a href=#idl-exposed-autofill-value id=autofill-processing-model:idl-exposed-autofill-value-5>IDL-exposed autofill value</a>.</p>

  


  <h4 id=textFieldSelection><span class=secno>4.10.20</span> APIs for the text control selections<a href=#textFieldSelection class=self-link></a></h4>

  

  <p>The <code id=textFieldSelection:the-input-element><a href=input.html#the-input-element>input</a></code> and <code id=textFieldSelection:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code> elements define several attributes and methods
  for handling their selection. Their shared algorithms are defined here.</p>

  

  <dl class=domintro><dt><code><var>element</var>.<a href=#dom-textarea/input-select id=dom-textarea/input-select-dev>select</a>()</code><dd><p>Selects everything in the text control.<dt><code><var>element</var>.<a href=#dom-textarea/input-selectionstart id=dom-textarea/input-selectionstart-dev>selectionStart</a> [ = <var>value</var> ]</code><dd>
    <p>Returns the offset to the start of the selection.</p>

    <p>Can be set, to change the start of the selection.</p>
   <dt><code><var>element</var>.<a href=#dom-textarea/input-selectionend id=dom-textarea/input-selectionend-dev>selectionEnd</a> [ = <var>value</var> ]</code><dd>
    <p>Returns the offset to the end of the selection.</p>

    <p>Can be set, to change the end of the selection.</p>
   <dt><code><var>element</var>.<a href=#dom-textarea/input-selectiondirection id=dom-textarea/input-selectiondirection-dev>selectionDirection</a> [ = <var>value</var> ]</code><dd>
    <p>Returns the current direction of the selection.</p>

    <p>Can be set, to change the direction of the selection.</p>

    <p>The possible values are "<code>forward</code>", "<code>backward</code>",
    and "<code>none</code>".</p>
   <dt><code><var>element</var>.<a href=#dom-textarea/input-setselectionrange id=dom-textarea/input-setselectionrange-dev>setSelectionRange</a>(<var>start</var>, <var>end</var> [, <var>direction</var>])</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange title="The HTMLInputElement.setSelectionRange() method sets the start and end positions of the current text selection in an <input> or <textarea> element.">HTMLInputElement/setSelectionRange</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>8+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd>
    <p>Changes the selection to cover the given substring in the given direction. If the direction
    is omitted, it will be reset to be the platform default (none or forward).</p>
   <dt><code><var>element</var>.<a href=#dom-textarea/input-setrangetext id=dom-textarea/input-setrangetext-dev>setRangeText</a>(<var>replacement</var> [, <var>start</var>, <var>end</var> [, <var>selectionMode</var> ] ])</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setRangeText title="The HTMLInputElement.setRangeText() method replaces a range of text in an <input> or <textarea> element with a new string.">HTMLInputElement/setRangeText</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>27+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span>24+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Replaces a range of text with the new text. If the <var>start</var> and <var>end</var>
    arguments are not provided, the range is assumed to be the selection.</p>

    <p>The final argument determines how the selection will be set after the text has been replaced.
    The possible values are:</p>

    <dl><dt>"<code id=dom-selectionmode-select-dev><a href=#dom-selectionmode-select>select</a></code>"<dd>Selects the newly inserted text.<dt>"<code id=dom-selectionmode-start-dev><a href=#dom-selectionmode-start>start</a></code>"<dd>Moves the selection to just before the inserted text.<dt>"<code id=dom-selectionmode-end-dev><a href=#dom-selectionmode-end>end</a></code>"<dd>Moves the selection to just after the selected text.<dt>"<code id=dom-selectionmode-preserve-dev><a href=#dom-selectionmode-preserve>preserve</a></code>"<dd>Attempts to preserve the selection. This is the default.</dl>
   </dl>

  

  <p>All <code id=textFieldSelection:the-input-element-2><a href=input.html#the-input-element>input</a></code> elements to which these APIs <a href=input.html#concept-input-apply id=textFieldSelection:concept-input-apply>apply</a>, and all <code id=textFieldSelection:the-textarea-element-2><a href=form-elements.html#the-textarea-element>textarea</a></code> elements, have either a
  <dfn id=concept-textarea/input-selection>selection</dfn> or a <dfn id=concept-textarea/input-cursor>text entry cursor position</dfn> at all times (even for
  elements that are not <a id=textFieldSelection:being-rendered href=rendering.html#being-rendered>being rendered</a>), measured in offsets into the <a href=https://infra.spec.whatwg.org/#code-unit id=textFieldSelection:code-unit data-x-internal=code-unit>code units</a> of the control's <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value>relevant value</a>. The initial state must
  consist of a <a href=#concept-textarea/input-cursor id=textFieldSelection:concept-textarea/input-cursor>text entry cursor</a> at the
  beginning of the control.</p>
  

  <p>For <code id=textFieldSelection:the-input-element-3><a href=input.html#the-input-element>input</a></code> elements, these APIs must operate on the element's <a href=#concept-fe-value id=textFieldSelection:concept-fe-value>value</a>. For <code id=textFieldSelection:the-textarea-element-3><a href=form-elements.html#the-textarea-element>textarea</a></code> elements, these APIs must
  operate on the element's <a href=#concept-fe-api-value id=textFieldSelection:concept-fe-api-value>API value</a>. In the below
  algorithms, we call the value string being operated on the <dfn id=concept-textarea/input-relevant-value>relevant value</dfn>.</p>

  <div class=example>
   <p>The use of <a href=#concept-fe-api-value id=textFieldSelection:concept-fe-api-value-2>API value</a> instead of <a href=form-elements.html#concept-textarea-raw-value id=textFieldSelection:concept-textarea-raw-value>raw value</a> for <code id=textFieldSelection:the-textarea-element-4><a href=form-elements.html#the-textarea-element>textarea</a></code> elements means
   that U+000D (CR) characters are normalized away. For example,

   <pre><code class='html'><c- p>&lt;</c-><c- f>textarea</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;demo&quot;</c-><c- p>&gt;&lt;/</c-><c- f>textarea</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 demo<c- p>.</c->value <c- o>=</c-> <c- u>&quot;A\r\nB&quot;</c-><c- p>;</c->
 demo<c- p>.</c->setRangeText<c- p>(</c-><c- u>&quot;replaced&quot;</c-><c- p>,</c-> <c- mf>0</c-><c- p>,</c-> <c- mf>2</c-><c- p>);</c->
 assert<c- p>(</c->demo<c- p>.</c->value <c- o>===</c-> <c- u>&quot;replacedB&quot;</c-><c- p>);</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   <p>If we had operated on the <a href=form-elements.html#concept-textarea-raw-value id=textFieldSelection:concept-textarea-raw-value-2>raw value</a> of "<code>A\r\nB</code>", then we would have replaced the characters "<code>A\r</code>", ending up with a result of "<code>replaced\nB</code>". But since
   we used the <a href=#concept-fe-api-value id=textFieldSelection:concept-fe-api-value-3>API value</a> of "<code>A\nB</code>", we replaced the characters "<code>A\n</code>", giving "<code>replacedB</code>".</p>
  </div>

  <p class=note>Characters with no visible rendering, such as U+200D ZERO WIDTH JOINER, still
  count as characters. Thus, for instance, the selection can include just an invisible character,
  and the text insertion cursor can be placed to one side or another of such a character.</p>

  <p>Whenever the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-2>relevant value</a> changes
  for an element to which these APIs apply, run these steps:</p>

  <ol><li>
    <p>If the element has a <a href=#concept-textarea/input-selection id=textFieldSelection:concept-textarea/input-selection>selection</a>:</p>

    <ol><li><p>If the start of the selection is now past the end of the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-3>relevant value</a>, set it to the end of the
     <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-4>relevant value</a>.<li><p>If the end of the selection is now past the end of the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-5>relevant value</a>, set it to the end of the
     <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-6>relevant value</a>.<li><p>If the user agent does not support empty selection, and both the start and end of the
     selection are now pointing to the end of the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-7>relevant value</a>, then instead set the
     element's <a href=#concept-textarea/input-cursor id=textFieldSelection:concept-textarea/input-cursor-2>text entry cursor position</a> to the
     end of the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-8>relevant value</a>, removing
     any selection.</ol>
   <li><p>Otherwise, the element must have a <a href=#concept-textarea/input-cursor id=textFieldSelection:concept-textarea/input-cursor-3>text entry
   cursor position</a> position. If it is now past the end of the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-9>relevant value</a>, set it to the end of the
   <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-10>relevant value</a>.</ol>

  <p class=note>In some cases where the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-11>relevant value</a> changes, other parts of the
  specification will also modify the <a href=#concept-textarea/input-cursor id=textFieldSelection:concept-textarea/input-cursor-4>text entry cursor
  position</a>, beyond just the clamping steps above. For example, see the <code id=textFieldSelection:dom-textarea-value><a href=form-elements.html#dom-textarea-value>value</a></code> setter for <code id=textFieldSelection:the-textarea-element-5><a href=form-elements.html#the-textarea-element>textarea</a></code>.</p>

  <p>Where possible, user interface features for changing the <a href=#concept-textarea/input-selection id=textFieldSelection:concept-textarea/input-selection-2>text selection</a> in <code id=textFieldSelection:the-input-element-4><a href=input.html#the-input-element>input</a></code> and
  <code id=textFieldSelection:the-textarea-element-6><a href=form-elements.html#the-textarea-element>textarea</a></code> elements must be implemented using the <a href=#set-the-selection-range id=textFieldSelection:set-the-selection-range>set the selection range</a>
  algorithm so that, e.g., all the same events fire.</p>

  <p>The <a href=#concept-textarea/input-selection id=textFieldSelection:concept-textarea/input-selection-3>selections</a> of <code id=textFieldSelection:the-input-element-5><a href=input.html#the-input-element>input</a></code> and
  <code id=textFieldSelection:the-textarea-element-7><a href=form-elements.html#the-textarea-element>textarea</a></code> elements have a <dfn id=selection-direction>selection direction</dfn>, which is either "<code>forward</code>", "<code>backward</code>", or "<code>none</code>".
  The exact meaning of the selection direction depends on the platform. This direction is set when
  the user manipulates the selection.  The initial <a href=#selection-direction id=textFieldSelection:selection-direction>selection direction</a> must be "<code>none</code>" if the platform supports that direction, or "<code>forward</code>" otherwise.</p>

  <p>To <dfn id=set-the-selection-direction>set the selection direction</dfn> of an element to a given direction, update the
  element's <a href=#selection-direction id=textFieldSelection:selection-direction-2>selection direction</a> to the given direction, unless the direction is "<code>none</code>" and the platform does not support that direction; in that case, update the
  element's <a href=#selection-direction id=textFieldSelection:selection-direction-3>selection direction</a> to "<code>forward</code>".</p>

  <div class=note>
   <p>On Windows, the direction indicates the position of the caret relative to
   the selection: a "<code>forward</code>" selection has the caret at the end of the
   selection and a "<code>backward</code>" selection has the caret at the start of the
   selection. Windows has no "<code>none</code>" direction.</p>

   <p>On Mac, the direction indicates which end of the selection is affected when the user adjusts
   the size of the selection using the arrow keys with the Shift modifier: the "<code>forward</code>" direction means the end of the selection is modified, and the "<code>backward</code>" direction means the start of the selection is modified. The "<code>none</code>" direction is the default on Mac, it indicates that no particular direction
   has yet been selected. The user sets the direction implicitly when first adjusting the selection,
   based on which directional arrow key was used.</p>
  </div>


  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select title="The HTMLInputElement.select() method selects all the text in a <textarea> element or in an <input> element that includes a text field.">HTMLInputElement/select</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select title="The HTMLInputElement.select() method selects all the text in a <textarea> element or in an <input> element that includes a text field.">HTMLInputElement/select</a></div></div><p>The <dfn data-dfn-for=HTMLInputElement,HTMLTextAreaElement id=dom-textarea/input-select data-dfn-type=method><code>select()</code></dfn> method, when invoked, must run the
  following steps:</p>

  <ol><li>
    <p>If this element is an <code id=textFieldSelection:the-input-element-6><a href=input.html#the-input-element>input</a></code> element, and either <code id=textFieldSelection:dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> <a href=input.html#do-not-apply id=textFieldSelection:do-not-apply>does not
    apply</a> to this element or the corresponding control has no selectable text, return.</p>

    <p class=example>For instance, in a user agent where <code id="textFieldSelection:color-state-(type=color)"><a href="input.html#color-state-(type=color)">&lt;input type=color></a></code> is rendered as a color well with a
    picker, as opposed to a text control accepting a hexadecimal color code, there would be no
    selectable text, and thus calls to the method are ignored.</p>
   <li><p><a href=#set-the-selection-range id=textFieldSelection:set-the-selection-range-2>Set the selection range</a> with 0 and infinity.</ol>

  <p>The <dfn data-dfn-for=HTMLInputElement,HTMLTextAreaElement id=dom-textarea/input-selectionstart data-dfn-type=attribute><code>selectionStart</code></dfn> attribute's getter must run
  the following steps:</p>

  <ol><li><p>If this element is an <code id=textFieldSelection:the-input-element-7><a href=input.html#the-input-element>input</a></code> element, and <code id=textFieldSelection:dom-textarea/input-selectionstart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code> <a href=input.html#do-not-apply id=textFieldSelection:do-not-apply-2>does
   not apply</a> to this element, return null.<li><p>If there is no <a href=#concept-textarea/input-selection id=textFieldSelection:concept-textarea/input-selection-4>selection</a>, return
   the <a id=textFieldSelection:code-unit-2 href=https://infra.spec.whatwg.org/#code-unit data-x-internal=code-unit>code unit</a> offset within the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-12>relevant value</a> to the character that
   immediately follows the <a href=#concept-textarea/input-cursor id=textFieldSelection:concept-textarea/input-cursor-5>text entry
   cursor</a>.<li><p>Return the <a id=textFieldSelection:code-unit-3 href=https://infra.spec.whatwg.org/#code-unit data-x-internal=code-unit>code unit</a> offset within the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-13>relevant value</a> to the character that
   immediately follows the start of the <a href=#concept-textarea/input-selection id=textFieldSelection:concept-textarea/input-selection-5>selection</a>.</ol>

  <p>The <code id=textFieldSelection:dom-textarea/input-selectionstart-2><a href=#dom-textarea/input-selectionstart>selectionStart</a></code> attribute's setter
  must run the following steps:</p>

  <ol><li><p>If this element is an <code id=textFieldSelection:the-input-element-8><a href=input.html#the-input-element>input</a></code> element, and <code id=textFieldSelection:dom-textarea/input-selectionstart-3><a href=#dom-textarea/input-selectionstart>selectionStart</a></code> <a href=input.html#do-not-apply id=textFieldSelection:do-not-apply-3>does
   not apply</a> to this element, throw an <a id=textFieldSelection:invalidstateerror href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a>
   <code id=textFieldSelection:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Let <var>end</var> be the value of this element's <code id=textFieldSelection:dom-textarea/input-selectionend><a href=#dom-textarea/input-selectionend>selectionEnd</a></code> attribute.<li><p>If <var>end</var> is less than the given value, set <var>end</var> to the given
   value.<li><p><a href=#set-the-selection-range id=textFieldSelection:set-the-selection-range-3>Set the selection range</a> with the given value, <var>end</var>, and the value
   of this element's <code id=textFieldSelection:dom-textarea/input-selectiondirection><a href=#dom-textarea/input-selectiondirection>selectionDirection</a></code>
   attribute.</ol>

  <p>The <dfn data-dfn-for=HTMLInputElement,HTMLTextAreaElement id=dom-textarea/input-selectionend data-dfn-type=attribute><code>selectionEnd</code></dfn> attribute's getter must run the
  following steps:</p>

  <ol><li><p>If this element is an <code id=textFieldSelection:the-input-element-9><a href=input.html#the-input-element>input</a></code> element, and <code id=textFieldSelection:dom-textarea/input-selectionend-2><a href=#dom-textarea/input-selectionend>selectionEnd</a></code> <a href=input.html#do-not-apply id=textFieldSelection:do-not-apply-4>does
   not apply</a> to this element, return null.<li><p>If there is no <a href=#concept-textarea/input-selection id=textFieldSelection:concept-textarea/input-selection-6>selection</a>, return
   the <a id=textFieldSelection:code-unit-4 href=https://infra.spec.whatwg.org/#code-unit data-x-internal=code-unit>code unit</a> offset within the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-14>relevant value</a> to the character that
   immediately follows the <a href=#concept-textarea/input-cursor id=textFieldSelection:concept-textarea/input-cursor-6>text entry
   cursor</a>.<li><p>Return the <a id=textFieldSelection:code-unit-5 href=https://infra.spec.whatwg.org/#code-unit data-x-internal=code-unit>code unit</a> offset within the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-15>relevant value</a> to the character that
   immediately follows the end of the <a href=#concept-textarea/input-selection id=textFieldSelection:concept-textarea/input-selection-7>selection</a>.</ol>

  <p>The <code id=textFieldSelection:dom-textarea/input-selectionend-3><a href=#dom-textarea/input-selectionend>selectionEnd</a></code> attribute's setter must
  run the following steps:</p>

  <ol><li><p>If this element is an <code id=textFieldSelection:the-input-element-10><a href=input.html#the-input-element>input</a></code> element, and <code id=textFieldSelection:dom-textarea/input-selectionend-4><a href=#dom-textarea/input-selectionend>selectionEnd</a></code> <a href=input.html#do-not-apply id=textFieldSelection:do-not-apply-5>does not
   apply</a> to this element, throw an <a id=textFieldSelection:invalidstateerror-2 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a>
   <code id=textFieldSelection:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p><a href=#set-the-selection-range id=textFieldSelection:set-the-selection-range-4>Set the selection range</a> with the value of this element's <code id=textFieldSelection:dom-textarea/input-selectionstart-4><a href=#dom-textarea/input-selectionstart>selectionStart</a></code> attribute, the given value, and
   the value of this element's <code id=textFieldSelection:dom-textarea/input-selectiondirection-2><a href=#dom-textarea/input-selectiondirection>selectionDirection</a></code> attribute.</ol>

  <p>The <dfn data-dfn-for=HTMLInputElement,HTMLTextAreaElement id=dom-textarea/input-selectiondirection data-dfn-type=attribute><code>selectionDirection</code></dfn> attribute's getter
  must run the following steps:</p>

  <ol><li><p>If this element is an <code id=textFieldSelection:the-input-element-11><a href=input.html#the-input-element>input</a></code> element, and <code id=textFieldSelection:dom-textarea/input-selectiondirection-3><a href=#dom-textarea/input-selectiondirection>selectionDirection</a></code> <a href=input.html#do-not-apply id=textFieldSelection:do-not-apply-6>does not apply</a> to this element, return null.<li><p>Return this element's <a href=#selection-direction id=textFieldSelection:selection-direction-4>selection direction</a>.</ol>

  <p>The <code id=textFieldSelection:dom-textarea/input-selectiondirection-4><a href=#dom-textarea/input-selectiondirection>selectionDirection</a></code> attribute's
  setter must run the following steps:</p>

  <ol><li><p>If this element is an <code id=textFieldSelection:the-input-element-12><a href=input.html#the-input-element>input</a></code> element, and <code id=textFieldSelection:dom-textarea/input-selectiondirection-5><a href=#dom-textarea/input-selectiondirection>selectionDirection</a></code> <a href=input.html#do-not-apply id=textFieldSelection:do-not-apply-7>does not apply</a> to this element, throw an
   <a id=textFieldSelection:invalidstateerror-3 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=textFieldSelection:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p><a href=#set-the-selection-range id=textFieldSelection:set-the-selection-range-5>Set the selection range</a> with the value of this element's <code id=textFieldSelection:dom-textarea/input-selectionstart-5><a href=#dom-textarea/input-selectionstart>selectionStart</a></code> attribute, the value of this
   element's <code id=textFieldSelection:dom-textarea/input-selectionend-5><a href=#dom-textarea/input-selectionend>selectionEnd</a></code> attribute, and the
   given value.</ol>

  <p>The <dfn data-dfn-for=HTMLInputElement,HTMLTextAreaElement id=dom-textarea/input-setselectionrange data-dfn-type=method><code>setSelectionRange(<var>start</var>, <var>end</var>,
  <var>direction</var>)</code></dfn> method, when invoked, must run the following steps:</p>

  <ol><li><p>If this element is an <code id=textFieldSelection:the-input-element-13><a href=input.html#the-input-element>input</a></code> element, and <code id=textFieldSelection:dom-textarea/input-setselectionrange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> <a href=input.html#do-not-apply id=textFieldSelection:do-not-apply-8>does not apply</a> to this element, throw an
   <a id=textFieldSelection:invalidstateerror-4 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=textFieldSelection:domexception-4><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p><a href=#set-the-selection-range id=textFieldSelection:set-the-selection-range-6>Set the selection range</a> with <var>start</var>, <var>end</var>, and
   <var>direction</var>.</ol>

  <p>To <dfn id=set-the-selection-range>set the selection range</dfn> with an integer or null <var>start</var>, an integer or
  null or the special value infinity <var>end</var>, and optionally a string <var>direction</var>,
  run the following steps:</p>

  <ol><li><p>If <var>start</var> is null, let <var>start</var> be 0.<li><p>If <var>end</var> is null, let <var>end</var> be 0.<li><p>Set the <a href=#concept-textarea/input-selection id=textFieldSelection:concept-textarea/input-selection-8>selection</a> of the text
   control to the sequence of <a href=https://infra.spec.whatwg.org/#code-unit id=textFieldSelection:code-unit-6 data-x-internal=code-unit>code units</a> within the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-16>relevant value</a> starting with the code unit
   at the <var>start</var>th position (in logical order) and ending with the code unit at the <span>(<var>end</var>-1)</span>th position. Arguments greater than the <a id=textFieldSelection:length href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> of
   the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-17>relevant value</a> of the text control
   (including the special value infinity) must be treated as pointing at the end of the text
   control. If <var>end</var> is less than or equal to <var>start</var>, then the start of the
   selection and the end of the selection must both be placed immediately before the character with
   offset <var>end</var>. In UAs where there is no concept of an empty selection, this must set the
   cursor to be just before the character with offset <var>end</var>.<li><p>If <var>direction</var> is not <a id=textFieldSelection:identical-to href=https://infra.spec.whatwg.org/#string-is data-x-internal=identical-to>identical to</a> either "<code>backward</code>" or "<code>forward</code>", or if the <var>direction</var>
   argument was not given, set <var>direction</var> to "<code>none</code>".<li><p><a href=#set-the-selection-direction id=textFieldSelection:set-the-selection-direction>Set the selection direction</a> of the text control to
   <var>direction</var>.<li><p>If the previous steps caused the <a href=#concept-textarea/input-selection id=textFieldSelection:concept-textarea/input-selection-9>selection</a> of the text control to be modified (in
   either extent or <a href=#selection-direction id=textFieldSelection:selection-direction-5>direction</a>), then <a id=textFieldSelection:queue-an-element-task href=webappapis.html#queue-an-element-task>queue an
   element task</a> on the <a id=textFieldSelection:user-interaction-task-source href=webappapis.html#user-interaction-task-source>user interaction task source</a> given the element to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=textFieldSelection:concept-event-fire data-x-internal=concept-event-fire>fire an event</a> named <code id=textFieldSelection:event-select><a href=indices.html#event-select>select</a></code>
   at the element, with the <code id=textFieldSelection:dom-event-bubbles><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code> attribute initialized to
   true.</ol>


  <p>The <dfn data-dfn-for=HTMLInputElement,HTMLTextAreaElement id=dom-textarea/input-setrangetext data-dfn-type=method><code>setRangeText(<var>replacement</var>, <var>start</var>,
  <var>end</var>, <var>selectMode</var>)</code></dfn> method, when invoked, must run the following
  steps:</p>

  <ol><li><p>If this element is an <code id=textFieldSelection:the-input-element-14><a href=input.html#the-input-element>input</a></code> element, and <code id=textFieldSelection:dom-textarea/input-setrangetext><a href=#dom-textarea/input-setrangetext>setRangeText()</a></code> <a href=input.html#do-not-apply id=textFieldSelection:do-not-apply-9>does
   not apply</a> to this element, throw an <a id=textFieldSelection:invalidstateerror-5 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a>
   <code id=textFieldSelection:domexception-5><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Set this element's <a href=#concept-fe-dirty id=textFieldSelection:concept-fe-dirty>dirty value flag</a> to
   true.<li>
    <p>If the method has only one argument, then let <var>start</var> and <var>end</var> have the values of the <code id=textFieldSelection:dom-textarea/input-selectionstart-6><a href=#dom-textarea/input-selectionstart>selectionStart</a></code> attribute and the <code id=textFieldSelection:dom-textarea/input-selectionend-6><a href=#dom-textarea/input-selectionend>selectionEnd</a></code> attribute respectively.</p>

    <p>Otherwise, let <var>start</var>, <var>end</var> have the values of the
    second and third arguments respectively.</p>
   <li><p>If <var>start</var> is greater than <var>end</var>, then throw an
   <a id=textFieldSelection:indexsizeerror href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a> <code id=textFieldSelection:domexception-6><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>If <var>start</var> is greater than the <a id=textFieldSelection:length-2 href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> of the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-18>relevant value</a> of the text control, then
   set it to the <a id=textFieldSelection:length-3 href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> of the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-19>relevant value</a> of the text control.<li><p>If <var>end</var> is greater than the <a id=textFieldSelection:length-4 href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> of the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-20>relevant value</a> of the text control, then
   set it to the <a id=textFieldSelection:length-5 href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> of the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-21>relevant value</a> of the text control.<li><p>Let <var>selection start</var> be the current value of the <code id=textFieldSelection:dom-textarea/input-selectionstart-7><a href=#dom-textarea/input-selectionstart>selectionStart</a></code> attribute.<li><p>Let <var>selection end</var> be the current value of the <code id=textFieldSelection:dom-textarea/input-selectionend-7><a href=#dom-textarea/input-selectionend>selectionEnd</a></code> attribute.<li><p>If <var>start</var> is less than <var>end</var>, delete the sequence of <a href=https://infra.spec.whatwg.org/#code-unit id=textFieldSelection:code-unit-7 data-x-internal=code-unit>code units</a> within the element's <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-22>relevant value</a> starting with the code unit
   at the <var>start</var>th position and ending with the code unit at the <span>(<var>end</var>-1)</span>th position.<li><p>Insert the value of the first argument into the text of the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-23>relevant value</a> of the text control,
   immediately before the <var>start</var>th <a id=textFieldSelection:code-unit-8 href=https://infra.spec.whatwg.org/#code-unit data-x-internal=code-unit>code unit</a>.<li><p>Let <var>new length</var> be the <a id=textFieldSelection:length-6 href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> of the value of the first
   argument.<li><p>Let <var>new end</var> be the sum of <var>start</var> and <var>new length</var>.<li>
    <p>Run the appropriate set of substeps from the following list:</p>

    <dl class=switch><dt>If the fourth argument's value is "<dfn data-dfn-for=SelectionMode id=dom-selectionmode-select data-dfn-type=enum-value><code>select</code></dfn>"<dd>
      <p>Let <var>selection start</var> be <var>start</var>.</p>

      <p>Let <var>selection end</var> be <var>new end</var>.</p>
     <dt>If the fourth argument's value is "<dfn data-dfn-for=SelectionMode id=dom-selectionmode-start data-dfn-type=enum-value><code>start</code></dfn>"<dd>
      <p>Let <var>selection start</var> and <var>selection end</var> be <var>start</var>.</p>
     <dt>If the fourth argument's value is "<dfn data-dfn-for=SelectionMode id=dom-selectionmode-end data-dfn-type=enum-value><code>end</code></dfn>"<dd>
      <p>Let <var>selection start</var> and <var>selection end</var> be <var>new end</var>.</p>
     <dt>If the fourth argument's value is "<dfn data-dfn-for=SelectionMode id=dom-selectionmode-preserve data-dfn-type=enum-value><code>preserve</code></dfn>"<dt>If the method has only one argument<dd>
      <ol><li><p>Let <var>old length</var> be <var>end</var> minus <var>start</var>.</p>

       <li><p>Let <var>delta</var> be <var>new length</var> minus <var>old length</var>.</p>

       <li>
        <p>If <var>selection start</var> is greater than <var>end</var>, then
        increment it by <var>delta</var>. (If <var>delta</var> is negative, i.e.
        the new text is shorter than the old text, then this will <em>decrease</em> the value of
        <var>selection start</var>.)</p>

        <p>Otherwise: if <var>selection start</var> is greater than <var>start</var>, then set it to <var>start</var>. (This snaps the start of the
        selection to the start of the new text if it was in the middle of the text that it
        replaced.)</p>
       <li>
        <p>If <var>selection end</var> is greater than <var>end</var>, then
        increment it by <var>delta</var> in the same way.</p>

        <p>Otherwise: if <var>selection end</var> is greater than <var>start</var>, then set it to <var>new end</var>. (This snaps the end of the
        selection to the end of the new text if it was in the middle of the text that it
        replaced.)</p>
       </ol>
     </dl>
   <li><p><a href=#set-the-selection-range id=textFieldSelection:set-the-selection-range-7>Set the selection range</a> with <var>selection start</var> and <var>selection
   end</var>.</ol>

  <p>The <code id=textFieldSelection:dom-textarea/input-setrangetext-2><a href=#dom-textarea/input-setrangetext>setRangeText()</a></code> method uses the
  following enumeration:</p>

  <pre><code class='idl'><c- b>enum</c-> <dfn id='selectionmode' data-dfn-type='enum'><c- g>SelectionMode</c-></dfn> {
  <c- s>&quot;</c-><a href='#dom-selectionmode-select' id='textFieldSelection:dom-selectionmode-select'><c- s>select</c-></a><c- s>&quot;</c->,
  <c- s>&quot;</c-><a href='#dom-selectionmode-start' id='textFieldSelection:dom-selectionmode-start'><c- s>start</c-></a><c- s>&quot;</c->,
  <c- s>&quot;</c-><a href='#dom-selectionmode-end' id='textFieldSelection:dom-selectionmode-end'><c- s>end</c-></a><c- s>&quot;</c->,
  <c- s>&quot;</c-><a href='#dom-selectionmode-preserve' id='textFieldSelection:dom-selectionmode-preserve'><c- s>preserve</c-></a><c- s>&quot;</c-> // default
};</code></pre>

  <hr>

  

  <div class=example>

   <p>To obtain the currently selected text, the following JavaScript suffices:</p>

   <pre><code class='js'><c- a>var</c-> selectionText <c- o>=</c-> control<c- p>.</c->value<c- p>.</c->substring<c- p>(</c->control<c- p>.</c->selectionStart<c- p>,</c-> control<c- p>.</c->selectionEnd<c- p>);</c-></code></pre>

   <p>...where <var>control</var> is the <code id=textFieldSelection:the-input-element-15><a href=input.html#the-input-element>input</a></code> or <code id=textFieldSelection:the-textarea-element-8><a href=form-elements.html#the-textarea-element>textarea</a></code>
   element.</p>

  </div>

  <div class=example>

   <p>To add some text at the start of a text control, while maintaining the text selection, the
   three attributes must be preserved:</p>

   <pre><code class='js'><c- a>var</c-> oldStart <c- o>=</c-> control<c- p>.</c->selectionStart<c- p>;</c->
<c- a>var</c-> oldEnd <c- o>=</c-> control<c- p>.</c->selectionEnd<c- p>;</c->
<c- a>var</c-> oldDirection <c- o>=</c-> control<c- p>.</c->selectionDirection<c- p>;</c->
<c- a>var</c-> prefix <c- o>=</c-> <c- u>&quot;http://&quot;</c-><c- p>;</c->
control<c- p>.</c->value <c- o>=</c-> prefix <c- o>+</c-> control<c- p>.</c->value<c- p>;</c->
control<c- p>.</c->setSelectionRange<c- p>(</c->oldStart <c- o>+</c-> prefix<c- p>.</c->length<c- p>,</c-> oldEnd <c- o>+</c-> prefix<c- p>.</c->length<c- p>,</c-> oldDirection<c- p>);</c-></code></pre>

   <p>...where <var>control</var> is the <code id=textFieldSelection:the-input-element-16><a href=input.html#the-input-element>input</a></code> or <code id=textFieldSelection:the-textarea-element-9><a href=form-elements.html#the-textarea-element>textarea</a></code>
   element.</p>

  </div>



  <h4 id=constraints><span class=secno>4.10.21</span> Constraints<a href=#constraints class=self-link></a></h4>

  

  <h5 id=definitions><span class=secno>4.10.21.1</span> Definitions<a href=#definitions class=self-link></a></h5>

  <p>A <a href=forms.html#category-submit id=definitions:category-submit>submittable element</a> is a <dfn id=candidate-for-constraint-validation>candidate for constraint
  validation</dfn> except when a condition has <dfn id=barred-from-constraint-validation>barred
  the element from constraint validation</dfn>. (For example, an element is <a href=#barred-from-constraint-validation id=definitions:barred-from-constraint-validation>barred from
  constraint validation</a> if it has a <code id=definitions:the-datalist-element><a href=form-elements.html#the-datalist-element>datalist</a></code> element ancestor.)</p>

  <p>An element can have a <dfn id=custom-validity-error-message>custom validity error message</dfn> defined. Initially, an element
  must have its <a href=#custom-validity-error-message id=definitions:custom-validity-error-message>custom validity error message</a> set to the empty string. When its value
  is not the empty string, the element is <a href=#suffering-from-a-custom-error id=definitions:suffering-from-a-custom-error>suffering from a custom error</a>. It can be set
  using the <code id=definitions:dom-cva-setcustomvalidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code> method, except for
  <a href=custom-elements.html#form-associated-custom-element id=definitions:form-associated-custom-element>form-associated custom elements</a>. <a href=custom-elements.html#form-associated-custom-element id=definitions:form-associated-custom-element-2>Form-associated custom elements</a> can have a
  <a href=#custom-validity-error-message id=definitions:custom-validity-error-message-2>custom validity error message</a> set via their <code id=definitions:elementinternals><a href=custom-elements.html#elementinternals>ElementInternals</a></code> object's
  <code id=definitions:dom-elementinternals-setvalidity><a href=custom-elements.html#dom-elementinternals-setvalidity>setValidity()</a></code> method. The user agent should use the
  <a href=#custom-validity-error-message id=definitions:custom-validity-error-message-3>custom validity error message</a> when alerting the user to the problem with the
  control.</p>

  <p>An element can be constrained in various ways. The following is the list of <dfn id=validity-states>validity
  states</dfn> that a form control can be in, making the control invalid for the purposes of
  constraint validation. (The definitions below are non-normative; other parts of this specification
  define more precisely when each state applies or does not.)</p>

  <dl><dt> <dfn id=suffering-from-being-missing>Suffering from being missing</dfn> <dd>
    <p>When a control has no <a href=#concept-fe-value id=definitions:concept-fe-value>value</a> but has a <code>required</code> attribute (<code id=definitions:the-input-element><a href=input.html#the-input-element>input</a></code> <code id=definitions:attr-input-required><a href=input.html#attr-input-required>required</a></code>, <code id=definitions:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code> <code id=definitions:attr-textarea-required><a href=form-elements.html#attr-textarea-required>required</a></code>); or, more complicated rules for
    <code id=definitions:the-select-element><a href=form-elements.html#the-select-element>select</a></code> elements and controls in <a href=input.html#radio-button-group id=definitions:radio-button-group>radio button
    groups</a>, as specified in their sections.</p>

    <p>When the <code id=definitions:dom-elementinternals-setvalidity-2><a href=custom-elements.html#dom-elementinternals-setvalidity>setValidity()</a></code> method sets
    <code>valueMissing</code> flag to true for a
    <a id=definitions:form-associated-custom-element-3 href=custom-elements.html#form-associated-custom-element>form-associated custom element</a>.</p>
   <dt> <dfn id=suffering-from-a-type-mismatch>Suffering from a type mismatch</dfn> <dd>
    <p>When a control that allows arbitrary user input has a <a href=#concept-fe-value id=definitions:concept-fe-value-2>value</a> that is not in the correct syntax (<a href="input.html#email-state-(type=email)" id="definitions:email-state-(type=email)">Email</a>, <a href="input.html#url-state-(type=url)" id="definitions:url-state-(type=url)">URL</a>).
    </p>

    <p>When the <code id=definitions:dom-elementinternals-setvalidity-3><a href=custom-elements.html#dom-elementinternals-setvalidity>setValidity()</a></code> method sets
    <code>typeMismatch</code> flag to true for a
    <a id=definitions:form-associated-custom-element-4 href=custom-elements.html#form-associated-custom-element>form-associated custom element</a>.</p>
   <dt> <dfn id=suffering-from-a-pattern-mismatch>Suffering from a pattern mismatch</dfn> <dd>
    <p>When a control has a <a href=#concept-fe-value id=definitions:concept-fe-value-3>value</a> that doesn't satisfy the
    <code id=definitions:attr-input-pattern><a href=input.html#attr-input-pattern>pattern</a></code> attribute.</p>

    <p>When the <code id=definitions:dom-elementinternals-setvalidity-4><a href=custom-elements.html#dom-elementinternals-setvalidity>setValidity()</a></code> method sets
    <code>patternMismatch</code> flag to true for a
    <a id=definitions:form-associated-custom-element-5 href=custom-elements.html#form-associated-custom-element>form-associated custom element</a>.</p>
   <dt> <dfn id=suffering-from-being-too-long>Suffering from being too long</dfn> <dd>
    <p>When a control has a <a href=#concept-fe-value id=definitions:concept-fe-value-4>value</a> that is too long for the
    <a href=#attr-fe-maxlength id=definitions:attr-fe-maxlength>form control <code>maxlength</code> attribute</a>
    (<code id=definitions:the-input-element-2><a href=input.html#the-input-element>input</a></code> <code id=definitions:attr-input-maxlength><a href=input.html#attr-input-maxlength>maxlength</a></code>, <code id=definitions:the-textarea-element-2><a href=form-elements.html#the-textarea-element>textarea</a></code>
    <code id=definitions:attr-textarea-maxlength><a href=form-elements.html#attr-textarea-maxlength>maxlength</a></code>). </p>

    <p>When the <code id=definitions:dom-elementinternals-setvalidity-5><a href=custom-elements.html#dom-elementinternals-setvalidity>setValidity()</a></code> method sets
    <code>tooLong</code> flag to true for a
    <a id=definitions:form-associated-custom-element-6 href=custom-elements.html#form-associated-custom-element>form-associated custom element</a>.</p>
   <dt> <dfn id=suffering-from-being-too-short>Suffering from being too short</dfn> <dd>
    <p>When a control has a <a href=#concept-fe-value id=definitions:concept-fe-value-5>value</a> that is too short for the
    <a href=#attr-fe-minlength id=definitions:attr-fe-minlength>form control <code>minlength</code> attribute</a>
    (<code id=definitions:the-input-element-3><a href=input.html#the-input-element>input</a></code> <code id=definitions:attr-input-minlength><a href=input.html#attr-input-minlength>minlength</a></code>, <code id=definitions:the-textarea-element-3><a href=form-elements.html#the-textarea-element>textarea</a></code>
    <code id=definitions:attr-textarea-minlength><a href=form-elements.html#attr-textarea-minlength>minlength</a></code>). </p>

    <p>When the <code id=definitions:dom-elementinternals-setvalidity-6><a href=custom-elements.html#dom-elementinternals-setvalidity>setValidity()</a></code> method sets
    <code>tooShort</code> flag to true for a
    <a id=definitions:form-associated-custom-element-7 href=custom-elements.html#form-associated-custom-element>form-associated custom element</a>.</p>
   <dt> <dfn id=suffering-from-an-underflow>Suffering from an underflow</dfn> <dd>
    <p>When a control has a <a href=#concept-fe-value id=definitions:concept-fe-value-6>value</a> that is not the empty
    string and is too low for the <code id=definitions:attr-input-min><a href=input.html#attr-input-min>min</a></code> attribute.</p>

    <p>When the <code id=definitions:dom-elementinternals-setvalidity-7><a href=custom-elements.html#dom-elementinternals-setvalidity>setValidity()</a></code> method sets
    <code>rangeUnderflow</code> flag to true for a
    <a id=definitions:form-associated-custom-element-8 href=custom-elements.html#form-associated-custom-element>form-associated custom element</a>.</p>
  <dt> <dfn id=suffering-from-an-overflow>Suffering from an overflow</dfn> <dd>
    <p>When a control has a <a href=#concept-fe-value id=definitions:concept-fe-value-7>value</a> that is not the empty
    string and is too high for the <code id=definitions:attr-input-max><a href=input.html#attr-input-max>max</a></code> attribute.</p>

    <p>When the <code id=definitions:dom-elementinternals-setvalidity-8><a href=custom-elements.html#dom-elementinternals-setvalidity>setValidity()</a></code> method sets
    <code>rangeOverflow</code> flag to true for a
    <a id=definitions:form-associated-custom-element-9 href=custom-elements.html#form-associated-custom-element>form-associated custom element</a>.</p>
  <dt> <dfn id=suffering-from-a-step-mismatch>Suffering from a step mismatch</dfn> <dd>
    <p>When a control has a <a href=#concept-fe-value id=definitions:concept-fe-value-8>value</a> that doesn't fit the
    rules given by the <code id=definitions:attr-input-step><a href=input.html#attr-input-step>step</a></code> attribute.</p>

    <p>When the <code id=definitions:dom-elementinternals-setvalidity-9><a href=custom-elements.html#dom-elementinternals-setvalidity>setValidity()</a></code> method sets
    <code>stepMismatch</code> flag to true for a
    <a id=definitions:form-associated-custom-element-10 href=custom-elements.html#form-associated-custom-element>form-associated custom element</a>.</p>
  <dt> <dfn id=suffering-from-bad-input>Suffering from bad input</dfn> <dd>
    <p>When a control has incomplete input and the user agent does not think the user ought to
    be able to submit the form in its current state.</p>

    <p>When the <code id=definitions:dom-elementinternals-setvalidity-10><a href=custom-elements.html#dom-elementinternals-setvalidity>setValidity()</a></code> method sets
    <code>badInput</code> flag to true for a <a id=definitions:form-associated-custom-element-11 href=custom-elements.html#form-associated-custom-element>form-associated custom element</a>.
    </p>
   <dt> <dfn id=suffering-from-a-custom-error>Suffering from a custom error</dfn> <dd> <p>When a control's <a href=#custom-validity-error-message id=definitions:custom-validity-error-message-4>custom validity error message</a> (as set by the element's
   <code id=definitions:dom-cva-setcustomvalidity-2><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code> method or
   <code id=definitions:elementinternals-2><a href=custom-elements.html#elementinternals>ElementInternals</a></code>'s <code id=definitions:dom-elementinternals-setvalidity-11><a href=custom-elements.html#dom-elementinternals-setvalidity>setValidity()</a></code> method) is
   not the empty string.</p> </dl>

  <p class=note>An element can still suffer from these states even when the element is <a href=#concept-fe-disabled id=definitions:concept-fe-disabled>disabled</a>; thus these states can be represented in the DOM even
  if validating the form during submission wouldn't indicate a problem to the user.</p>

  <p>An element <dfn id=concept-fv-valid>satisfies its constraints</dfn> if it is not suffering
  from any of the above <a href=#validity-states id=definitions:validity-states>validity states</a>.</p>

  



  

  <h5 id=constraint-validation><span class=secno>4.10.21.2</span> Constraint validation<a href=#constraint-validation class=self-link></a></h5>

  <p>When the user agent is required to <dfn id=statically-validate-the-constraints>statically validate the constraints</dfn> of
  <code id=constraint-validation:the-form-element><a href=forms.html#the-form-element>form</a></code> element <var>form</var>, it must run the following steps, which return
  either a <i>positive</i> result (all the controls in the form are valid) or a <i>negative</i>
  result (there are invalid controls) along with a (possibly empty) list of elements that are
  invalid and for which no script has claimed responsibility:</p>

  <ol><li><p>Let <var>controls</var> be a list of all the <a href=forms.html#category-submit id=constraint-validation:category-submit>submittable elements</a> whose <a href=#form-owner id=constraint-validation:form-owner>form owner</a> is <var>form</var>, in <a id=constraint-validation:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>.<li><p>Let <var>invalid controls</var> be an initially empty list of elements.<li>
    <p>For each element <var>field</var> in <var>controls</var>, in <a id=constraint-validation:tree-order-2 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>:</p>

    <ol><li><p>If <var>field</var> is not a <a href=#candidate-for-constraint-validation id=constraint-validation:candidate-for-constraint-validation>candidate for constraint validation</a>,
     then move on to the next element.<li><p>Otherwise, if <var>field</var> <a href=#concept-fv-valid id=constraint-validation:concept-fv-valid>satisfies its
     constraints</a>, then move on to the next element.<li><p>Otherwise, add <var>field</var> to <var>invalid
     controls</var>.</ol>
   <li><p>If <var>invalid controls</var> is empty, then return a <i>positive</i> result.<li><p>Let <var>unhandled invalid controls</var> be an initially empty list of
   elements.<li>
    <p>For each element <var>field</var> in <var>invalid controls</var>, if any, in <a id=constraint-validation:tree-order-3 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree
    order</a>:</p>

    <ol><li><p>Let <var>notCanceled</var> be the result of <a href=https://dom.spec.whatwg.org/#concept-event-fire id=constraint-validation:concept-event-fire data-x-internal=concept-event-fire>firing an
     event</a> named <code id=constraint-validation:event-invalid><a href=indices.html#event-invalid>invalid</a></code> at <var>field</var>, with the
     <code id=constraint-validation:dom-event-cancelable><a data-x-internal=dom-event-cancelable href=https://dom.spec.whatwg.org/#dom-event-cancelable>cancelable</a></code> attribute initialized to true.<li><p>If <var>notCanceled</var> is true, then add <var>field</var> to <var>unhandled invalid
     controls</var>.</ol>
   <li><p>Return a <i>negative</i> result with the list of elements in the <var>unhandled
   invalid controls</var> list.</ol>

  <p>If a user agent is to <dfn id=interactively-validate-the-constraints>interactively validate the constraints</dfn> of <code id=constraint-validation:the-form-element-2><a href=forms.html#the-form-element>form</a></code>
  element <var>form</var>, then the user agent must run the following steps:</p>

  <ol><li><p><a href=#statically-validate-the-constraints id=constraint-validation:statically-validate-the-constraints>Statically validate the constraints</a> of <var>form</var>, and let
   <var>unhandled invalid controls</var> be the list of elements returned if the result was
   <i>negative</i>.<li><p>If the result was <i>positive</i>, then return that result.<li>
    <p>Report the problems with the constraints of at least one of the elements given in
    <var>unhandled invalid controls</var> to the user.</p>

    <ul><li><p>User agents may focus one of those elements in the process, by running the
     <a id=constraint-validation:focusing-steps href=interaction.html#focusing-steps>focusing steps</a> for that element, and may change the scrolling position of the
     document, or perform some other action that brings the element to the user's attention. For
     elements that are <a href=custom-elements.html#form-associated-custom-element id=constraint-validation:form-associated-custom-element>form-associated custom
     elements</a>, user agents should use their <a href=custom-elements.html#face-validation-anchor id=constraint-validation:face-validation-anchor>validation
     anchor</a> instead, for the purposes of these actions.<li><p>User agents may report more than one constraint violation.<li><p>User agents may coalesce related constraint violation reports if appropriate (e.g. if
     multiple radio buttons in a <a href=input.html#radio-button-group id=constraint-validation:radio-button-group>group</a> are marked as
     required, only one error need be reported).<li><p>If one of the controls is not <a id=constraint-validation:being-rendered href=rendering.html#being-rendered>being rendered</a> (e.g. it has the <code id=constraint-validation:attr-hidden><a href=interaction.html#attr-hidden>hidden</a></code> attribute set), then user agents may report a script
     error.</ul>
   <li><p>Return a <i>negative</i> result.</ol>

  



  <h5 id=the-constraint-validation-api><span class=secno>4.10.21.3</span> The <dfn>constraint validation API</dfn><a href=#the-constraint-validation-api class=self-link></a></h5>

  <dl class=domintro><dt><code><var>element</var>.<a href=#dom-cva-willvalidate id=dom-cva-willvalidate-dev>willValidate</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/willValidate title="The willValidate read-only property of the HTMLObjectElement interface returns a boolean value that indicates whether the element is a candidate for constraint validation. Always false for HTMLObjectElement objects.">HTMLObjectElement/willValidate</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>4+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns true if the element will be validated when the form is submitted; false
    otherwise.</p>
   <dt><code><var>element</var>.<a href=#dom-cva-setcustomvalidity id=dom-cva-setcustomvalidity-dev>setCustomValidity</a>(<var>message</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity title="The setCustomValidity() method of the HTMLObjectElement interface sets a custom validity message for the element.">HTMLObjectElement/setCustomValidity</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>10+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/setCustomValidity title="The HTMLSelectElement.setCustomValidity() method sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does not have a custom validity error.">HTMLSelectElement/setCustomValidity</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>4+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Sets a custom error, so that the element would fail to validate. The given message is the
    message to be shown to the user when reporting the problem to the user.</p>

    <p>If the argument is the empty string, clears the custom error.</p>
   <dt><code><var>element</var>.<a href=#dom-cva-validity id=the-constraint-validation-api:dom-cva-validity>validity</a>.<a href=#dom-validitystate-valuemissing id=dom-validitystate-valuemissing-dev>valueMissing</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/valueMissing title="The read-only valueMissing property of a ValidityState object indicates if a required control, such as an <input>, <select>, or <textarea>, has an empty value.">ValidityState/valueMissing</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>5+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd><p>Returns true if the element has no value but is a required field; false
   otherwise.<dt><code><var>element</var>.<a href=#dom-cva-validity id=the-constraint-validation-api:dom-cva-validity-2>validity</a>.<a href=#dom-validitystate-typemismatch id=dom-validitystate-typemismatch-dev>typeMismatch</a></code><dd><p>Returns true if the element's value is not in the correct syntax; false
   otherwise.<dt><code><var>element</var>.<a href=#dom-cva-validity id=the-constraint-validation-api:dom-cva-validity-3>validity</a>.<a href=#dom-validitystate-patternmismatch id=dom-validitystate-patternmismatch-dev>patternMismatch</a></code><dd><p>Returns true if the element's value doesn't match the provided pattern; false
   otherwise.<dt><code><var>element</var>.<a href=#dom-cva-validity id=the-constraint-validation-api:dom-cva-validity-4>validity</a>.<a href=#dom-validitystate-toolong id=dom-validitystate-toolong-dev>tooLong</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/tooLong title="The read-only tooLong property of a ValidityState object indicates if the value of an <input> or <textarea>, after having been edited by the user, exceeds the maximum code-unit length established by the element's maxlength attribute.">ValidityState/tooLong</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>64+</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>5+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>4+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns true if the element's value is longer than the provided maximum length; false
    otherwise.</p>
   <dt><code><var>element</var>.<a href=#dom-cva-validity id=the-constraint-validation-api:dom-cva-validity-5>validity</a>.<a href=#dom-validitystate-tooshort id=dom-validitystate-tooshort-dev>tooShort</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/tooShort title="The read-only tooShort property of a ValidityState object indicates if the value of an <input>, <button>, <select>, <output>, <fieldset> or <textarea>, after having been edited by the user, is less than the minimum code-unit length established by the element's minlength attribute.">ValidityState/tooShort</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>51+</span></span><span class="safari yes"><span>Safari</span><span>10+</span></span><span class="chrome yes"><span>Chrome</span><span>40+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>17+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>64+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>67+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns true if the element's value, if it is not the empty string, is shorter than the
    provided minimum length; false otherwise.</p>
   <dt><code><var>element</var>.<a href=#dom-cva-validity id=the-constraint-validation-api:dom-cva-validity-6>validity</a>.<a href=#dom-validitystate-rangeunderflow id=dom-validitystate-rangeunderflow-dev>rangeUnderflow</a></code><dd><p>Returns true if the element's value is lower than the provided minimum; false
   otherwise.<dt><code><var>element</var>.<a href=#dom-cva-validity id=the-constraint-validation-api:dom-cva-validity-7>validity</a>.<a href=#dom-validitystate-rangeoverflow id=dom-validitystate-rangeoverflow-dev>rangeOverflow</a></code><dd><p>Returns true if the element's value is higher than the provided maximum; false
   otherwise.<dt><code><var>element</var>.<a href=#dom-cva-validity id=the-constraint-validation-api:dom-cva-validity-8>validity</a>.<a href=#dom-validitystate-stepmismatch id=dom-validitystate-stepmismatch-dev>stepMismatch</a></code><dd><p>Returns true if the element's value doesn't fit the rules given by the <code id=the-constraint-validation-api:attr-input-step><a href=input.html#attr-input-step>step</a></code> attribute; false otherwise.<dt><code><var>element</var>.<a href=#dom-cva-validity id=the-constraint-validation-api:dom-cva-validity-9>validity</a>.<a href=#dom-validitystate-badinput id=dom-validitystate-badinput-dev>badInput</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/badInput title="The read-only badInput property of a ValidityState object indicates if the user has provided input that the browser is unable to convert. For example, if you have a number input element whose content is a string.">ValidityState/badInput</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>29+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span>25+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>64+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns true if the user has provided input in the user interface that the user agent is
    unable to convert to a value; false otherwise.</p>
   <dt><code><var>element</var>.<a href=#dom-cva-validity id=the-constraint-validation-api:dom-cva-validity-10>validity</a>.<a href=#dom-validitystate-customerror id=dom-validitystate-customerror-dev>customError</a></code><dd><p>Returns true if the element has a custom error; false otherwise.<dt><code><var>element</var>.<a href=#dom-cva-validity id=the-constraint-validation-api:dom-cva-validity-11>validity</a>.<a href=#dom-validitystate-valid id=dom-validitystate-valid-dev>valid</a></code><dd><p>Returns true if the element's value has no validity problems; false otherwise.<dt><code><var>valid</var> = <var>element</var>.<a href=#dom-cva-checkvalidity id=dom-cva-checkvalidity-dev>checkValidity</a>()</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity title="The HTMLInputElement.checkValidity() method returns a boolean value which indicates validity of the value of the element. If the value is invalid, this method also fires the invalid event on the element.">HTMLInputElement/checkValidity</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>4+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/checkValidity title="The checkValidity() method of the HTMLObjectElement interface returns a boolean value that always is true, because object objects are never candidates for constraint validation.">HTMLObjectElement/checkValidity</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>10+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity title="The HTMLSelectElement.checkValidity() method checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable invalid event at the element, and then returns false.">HTMLSelectElement/checkValidity</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>9+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>4+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd><p>Returns true if the element's value has no validity problems; false otherwise. Fires an
   <code id=the-constraint-validation-api:event-invalid><a href=indices.html#event-invalid>invalid</a></code> event at the element in the latter case.<dt><code><var>valid</var> = <var>element</var>.<a href=#dom-cva-reportvalidity id=dom-cva-reportvalidity-dev>reportValidity</a>()</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity title="The HTMLFormElement.reportValidity() method returns true if the element's child controls satisfy their validation constraints. When false is returned, cancelable invalid events are fired for each invalid child and validation problems are reported to the user.">HTMLFormElement/reportValidity</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>49+</span></span><span class="safari yes"><span>Safari</span><span>10.1+</span></span><span class="chrome yes"><span>Chrome</span><span>40+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>17+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity title="The reportValidity() method of the HTMLInputElement interface performs the same validity checking steps as the checkValidity() method. If the value is invalid, this method also fires the invalid event on the element, and (if the event isn't canceled) reports the problem to the user.">HTMLInputElement/reportValidity</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>49+</span></span><span class="safari yes"><span>Safari</span><span>10.1+</span></span><span class="chrome yes"><span>Chrome</span><span>40+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>17+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>64+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns true if the element's value has no validity problems; otherwise, returns false, fires
    an <code id=the-constraint-validation-api:event-invalid-2><a href=indices.html#event-invalid>invalid</a></code> event at the element, and (if the event isn't
    canceled) reports the problem to the user.</p>
   <dt><code><var>element</var>.<a href=#dom-cva-validationmessage id=dom-cva-validationmessage-dev>validationMessage</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validationMessage title="The validationMessage read-only property of the HTMLObjectElement interface returns a string representing a localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation (willValidate is false), or it satisfies its constraints.">HTMLObjectElement/validationMessage</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>10+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the error message that would be shown to the user if the element was to be checked
    for validity.</p>
   </dl>

  

  <p>The <dfn data-dfn-for=HTMLObjectElement,HTMLInputElement,HTMLButtonElement,HTMLSelectElement,HTMLTextAreaElement,HTMLOutputElement,HTMLFieldSetElement id=dom-cva-willvalidate data-dfn-type=attribute><code>willValidate</code></dfn> attribute's getter must return true, if
  this element is a <a href=#candidate-for-constraint-validation id=the-constraint-validation-api:candidate-for-constraint-validation>candidate for constraint validation</a>, and false otherwise (i.e.,
  false if any conditions are <a href=#barred-from-constraint-validation id=the-constraint-validation-api:barred-from-constraint-validation>barring it from
  constraint validation</a>).</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate title="The willValidate read-only property of the ElementInternals interface returns true if the element is a submittable element that is a candidate for constraint validation.">ElementInternals/willValidate</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>98+</span></span><span class="safari yes"><span>Safari</span><span>16.4+</span></span><span class="chrome yes"><span>Chrome</span><span>77+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=ElementInternals id=dom-elementinternals-willvalidate data-dfn-type=attribute><code>willValidate</code></dfn> attribute of
  <code id=the-constraint-validation-api:elementinternals><a href=custom-elements.html#elementinternals>ElementInternals</a></code> interface, on getting, must throw a
  <a id=the-constraint-validation-api:notsupportederror href=https://webidl.spec.whatwg.org/#notsupportederror data-x-internal=notsupportederror>"<code>NotSupportedError</code>"</a> <code id=the-constraint-validation-api:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the <a href=custom-elements.html#internals-target id=the-constraint-validation-api:internals-target>target element</a> is not a <a id=the-constraint-validation-api:form-associated-custom-element href=custom-elements.html#form-associated-custom-element>form-associated custom
  element</a>. Otherwise, it must return true if the <a href=custom-elements.html#internals-target id=the-constraint-validation-api:internals-target-2>target
  element</a> is a <a href=#candidate-for-constraint-validation id=the-constraint-validation-api:candidate-for-constraint-validation-2>candidate for constraint validation</a>, and false otherwise.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity title="The HTMLInputElement.setCustomValidity() method sets a custom validity message for the element.">HTMLInputElement/setCustomValidity</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>4+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=HTMLObjectElement,HTMLInputElement,HTMLButtonElement,HTMLSelectElement,HTMLTextAreaElement,HTMLOutputElement,HTMLFieldSetElement id=dom-cva-setcustomvalidity data-dfn-type=method><code>setCustomValidity(<var>error</var>)</code></dfn> method steps
  are:</p>

  <ol><li><p>Set <var>error</var> to the result of <a href=https://infra.spec.whatwg.org/#normalize-newlines id=the-constraint-validation-api:normalize-newlines data-x-internal=normalize-newlines>normalizing
   newlines</a> given <var>error</var>.<li><p>Set the <a href=#custom-validity-error-message id=the-constraint-validation-api:custom-validity-error-message>custom validity error message</a> to <var>error</var>.</ol>

  

  <div class=example>

   <p>In the following example, a script checks the value of a form control each time it is edited,
   and whenever it is not a valid value, uses the <code id=the-constraint-validation-api:dom-cva-setcustomvalidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code> method to set an appropriate
   message.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->Feeling: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>f</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;text&quot;</c-> <c- e>oninput</c-><c- o>=</c-><c- s>&quot;check(this)&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- a>function</c-> check<c- p>(</c->input<c- p>)</c-> <c- p>{</c->
   <c- k>if</c-> <c- p>(</c->input<c- p>.</c->value <c- o>==</c-> <c- u>&quot;good&quot;</c-> <c- o>||</c->
       input<c- p>.</c->value <c- o>==</c-> <c- u>&quot;fine&quot;</c-> <c- o>||</c->
       input<c- p>.</c->value <c- o>==</c-> <c- u>&quot;tired&quot;</c-><c- p>)</c-> <c- p>{</c->
     input<c- p>.</c->setCustomValidity<c- p>(</c-><c- t>&apos;&quot;&apos;</c-> <c- o>+</c-> input<c- p>.</c->value <c- o>+</c-> <c- t>&apos;&quot; is not a feeling.&apos;</c-><c- p>);</c->
   <c- p>}</c-> <c- k>else</c-> <c- p>{</c->
     <c- c1>// input is fine -- reset the error message</c->
     input<c- p>.</c->setCustomValidity<c- p>(</c-><c- t>&apos;&apos;</c-><c- p>);</c->
   <c- p>}</c->
 <c- p>}</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

  </div>

  

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity title="The validity read-only property of the HTMLObjectElement interface returns a ValidityState with the validity states that this element is in.">HTMLObjectElement/validity</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>10+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=HTMLObjectElement,HTMLInputElement,HTMLButtonElement,HTMLSelectElement,HTMLTextAreaElement,HTMLOutputElement,HTMLFieldSetElement id=dom-cva-validity data-dfn-type=attribute><code>validity</code></dfn> attribute's getter must return a
  <code id=the-constraint-validation-api:validitystate><a href=#validitystate>ValidityState</a></code> object that represents the <a href=#validity-states id=the-constraint-validation-api:validity-states>validity states</a> of this
  element. This object is <a id=the-constraint-validation-api:live href=infrastructure.html#live>live</a>.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/validity title="The validity read-only property of the ElementInternals interface returns a ValidityState object which represents the different validity states the element can be in, with respect to constraint validation.">ElementInternals/validity</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>98+</span></span><span class="safari yes"><span>Safari</span><span>16.4+</span></span><span class="chrome yes"><span>Chrome</span><span>77+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=ElementInternals id=dom-elementinternals-validity data-dfn-type=attribute><code>validity</code></dfn> attribute of
  <code id=the-constraint-validation-api:elementinternals-2><a href=custom-elements.html#elementinternals>ElementInternals</a></code> interface, on getting, must throw a
  <a id=the-constraint-validation-api:notsupportederror-2 href=https://webidl.spec.whatwg.org/#notsupportederror data-x-internal=notsupportederror>"<code>NotSupportedError</code>"</a> <code id=the-constraint-validation-api:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the <a href=custom-elements.html#internals-target id=the-constraint-validation-api:internals-target-3>target element</a> is not a <a id=the-constraint-validation-api:form-associated-custom-element-2 href=custom-elements.html#form-associated-custom-element>form-associated custom
  element</a>. Otherwise, it must return a <code id=the-constraint-validation-api:validitystate-2><a href=#validitystate>ValidityState</a></code> object that represents the
  <a href=#validity-states id=the-constraint-validation-api:validity-states-2>validity states</a> of the <a href=custom-elements.html#internals-target id=the-constraint-validation-api:internals-target-4>target element</a>. This
  object is <a id=the-constraint-validation-api:live-2 href=infrastructure.html#live>live</a>.</p>

<pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='validitystate' data-dfn-type='interface'><c- g>ValidityState</c-></dfn> {
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-validitystate-valuemissing' id='the-constraint-validation-api:dom-validitystate-valuemissing'><c- g>valueMissing</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-validitystate-typemismatch' id='the-constraint-validation-api:dom-validitystate-typemismatch'><c- g>typeMismatch</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-validitystate-patternmismatch' id='the-constraint-validation-api:dom-validitystate-patternmismatch'><c- g>patternMismatch</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-validitystate-toolong' id='the-constraint-validation-api:dom-validitystate-toolong'><c- g>tooLong</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-validitystate-tooshort' id='the-constraint-validation-api:dom-validitystate-tooshort'><c- g>tooShort</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-validitystate-rangeunderflow' id='the-constraint-validation-api:dom-validitystate-rangeunderflow'><c- g>rangeUnderflow</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-validitystate-rangeoverflow' id='the-constraint-validation-api:dom-validitystate-rangeoverflow'><c- g>rangeOverflow</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-validitystate-stepmismatch' id='the-constraint-validation-api:dom-validitystate-stepmismatch'><c- g>stepMismatch</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-validitystate-badinput' id='the-constraint-validation-api:dom-validitystate-badinput'><c- g>badInput</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-validitystate-customerror' id='the-constraint-validation-api:dom-validitystate-customerror'><c- g>customError</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-validitystate-valid' id='the-constraint-validation-api:dom-validitystate-valid'><c- g>valid</c-></a>;
};</code></pre>

  <p>A <code id=the-constraint-validation-api:validitystate-3><a href=#validitystate>ValidityState</a></code> object has the following attributes. On getting, they must return
  true if the corresponding condition given in the following list is true, and false otherwise.</p>

  <dl><dt><dfn data-dfn-for=ValidityState id=dom-validitystate-valuemissing data-dfn-type=attribute><code>valueMissing</code></dfn><dd> <p>The control is <a href=#suffering-from-being-missing id=the-constraint-validation-api:suffering-from-being-missing>suffering from being missing</a>.</p> <dt><dfn data-dfn-for=ValidityState id=dom-validitystate-typemismatch data-dfn-type=attribute><code>typeMismatch</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/typeMismatch title="The read-only typeMismatch property of a ValidityState object indicates if the value of an <input>, after having been edited by the user, does not conform to the constraints set by the element's type attribute.">ValidityState/typeMismatch</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>5+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd> <p>The control is <a href=#suffering-from-a-type-mismatch id=the-constraint-validation-api:suffering-from-a-type-mismatch>suffering from a type mismatch</a>.</p> <dt><dfn data-dfn-for=ValidityState id=dom-validitystate-patternmismatch data-dfn-type=attribute><code>patternMismatch</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/patternMismatch title="The read-only patternMismatch property of a ValidityState object indicates if the value of an <input>, after having been edited by the user, does not conform to the constraints set by the element's pattern attribute.">ValidityState/patternMismatch</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>5+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd> <p>The control is <a href=#suffering-from-a-pattern-mismatch id=the-constraint-validation-api:suffering-from-a-pattern-mismatch>suffering from a pattern mismatch</a>.</p> <dt><dfn data-dfn-for=ValidityState id=dom-validitystate-toolong data-dfn-type=attribute><code>tooLong</code></dfn><dd> <p>The control is <a href=#suffering-from-being-too-long id=the-constraint-validation-api:suffering-from-being-too-long>suffering from being too long</a>.</p> <dt><dfn data-dfn-for=ValidityState id=dom-validitystate-tooshort data-dfn-type=attribute><code>tooShort</code></dfn><dd> <p>The control is <a href=#suffering-from-being-too-short id=the-constraint-validation-api:suffering-from-being-too-short>suffering from being too short</a>.</p> <dt><dfn data-dfn-for=ValidityState id=dom-validitystate-rangeunderflow data-dfn-type=attribute><code>rangeUnderflow</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/rangeUnderflow title="The read-only rangeUnderflow property of a ValidityState object indicates if the value of an <input>, after having been edited by the user, does not conform to the constraints set by the element's min attribute.">ValidityState/rangeUnderflow</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>5+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd> <p>The control is <a href=#suffering-from-an-underflow id=the-constraint-validation-api:suffering-from-an-underflow>suffering from an underflow</a>.</p> <dt><dfn data-dfn-for=ValidityState id=dom-validitystate-rangeoverflow data-dfn-type=attribute><code>rangeOverflow</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/rangeOverflow title="The read-only rangeOverflow property of a ValidityState object indicates if the value of an <input>, after having been edited by the user, does not conform to the constraints set by the element's max attribute.">ValidityState/rangeOverflow</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>5+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd> <p>The control is <a href=#suffering-from-an-overflow id=the-constraint-validation-api:suffering-from-an-overflow>suffering from an overflow</a>.</p> <dt><dfn data-dfn-for=ValidityState id=dom-validitystate-stepmismatch data-dfn-type=attribute><code>stepMismatch</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/stepMismatch title="The read-only stepMismatch property of a ValidityState object indicates if the value of an <input>, after having been edited by the user, does not conform to the constraints set by the element's step attribute.">ValidityState/stepMismatch</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>5+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd> <p>The control is <a href=#suffering-from-a-step-mismatch id=the-constraint-validation-api:suffering-from-a-step-mismatch>suffering from a step mismatch</a>.</p> <dt><dfn data-dfn-for=ValidityState id=dom-validitystate-badinput data-dfn-type=attribute><code>badInput</code></dfn><dd> <p>The control is <a href=#suffering-from-bad-input id=the-constraint-validation-api:suffering-from-bad-input>suffering from bad input</a>.</p> <dt><dfn data-dfn-for=ValidityState id=dom-validitystate-customerror data-dfn-type=attribute><code>customError</code></dfn><dd> <p>The control is <a href=#suffering-from-a-custom-error id=the-constraint-validation-api:suffering-from-a-custom-error>suffering from a custom error</a>.</p> <dt><dfn data-dfn-for=ValidityState id=dom-validitystate-valid data-dfn-type=attribute><code>valid</code></dfn><dd> <p>None of the other conditions are true.</p> </dl>

  <p>The <dfn id=check-validity-steps>check validity steps</dfn> for an element <var>element</var> are:</p>

  <ol><li>
    <p>If <var>element</var> is a <a href=#candidate-for-constraint-validation id=the-constraint-validation-api:candidate-for-constraint-validation-3>candidate for constraint validation</a> and does not
    <a href=#concept-fv-valid id=the-constraint-validation-api:concept-fv-valid>satisfy its constraints</a>, then:</p>

    <ol><li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id=the-constraint-validation-api:concept-event-fire data-x-internal=concept-event-fire>Fire an event</a> named <code id=the-constraint-validation-api:event-invalid-3><a href=indices.html#event-invalid>invalid</a></code> at <var>element</var>, with the <code id=the-constraint-validation-api:dom-event-cancelable><a data-x-internal=dom-event-cancelable href=https://dom.spec.whatwg.org/#dom-event-cancelable>cancelable</a></code> attribute initialized to true (though canceling
     has no effect).<li><p>Return false.</ol>

   <li><p>Return true.</ol>

  <p>The <dfn data-dfn-for=HTMLObjectElement,HTMLInputElement,HTMLButtonElement,HTMLSelectElement,HTMLTextAreaElement,HTMLOutputElement,HTMLFieldSetElement id=dom-cva-checkvalidity data-dfn-type=method><code>checkValidity()</code></dfn> method, when invoked, must run the
  <a href=#check-validity-steps id=the-constraint-validation-api:check-validity-steps>check validity steps</a> on this element.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/checkValidity title="The checkValidity() method of the ElementInternals interface checks if the element meets any constraint validation rules applied to it.">ElementInternals/checkValidity</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>98+</span></span><span class="safari yes"><span>Safari</span><span>16.4+</span></span><span class="chrome yes"><span>Chrome</span><span>77+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=ElementInternals id=dom-elementinternals-checkvalidity data-dfn-type=method><code>checkValidity()</code></dfn> method of the
  <code id=the-constraint-validation-api:elementinternals-3><a href=custom-elements.html#elementinternals>ElementInternals</a></code> interface must run these steps:</p>

  <ol><li><p>Let <var>element</var> be this <code id=the-constraint-validation-api:elementinternals-4><a href=custom-elements.html#elementinternals>ElementInternals</a></code>'s <a href=custom-elements.html#internals-target id=the-constraint-validation-api:internals-target-5>target element</a>.<li><p>If <var>element</var> is not a <a id=the-constraint-validation-api:form-associated-custom-element-3 href=custom-elements.html#form-associated-custom-element>form-associated custom element</a>, then throw a
   <a id=the-constraint-validation-api:notsupportederror-3 href=https://webidl.spec.whatwg.org/#notsupportederror data-x-internal=notsupportederror>"<code>NotSupportedError</code>"</a> <code id=the-constraint-validation-api:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Run the <a href=#check-validity-steps id=the-constraint-validation-api:check-validity-steps-2>check validity steps</a> on <var>element</var>.</ol>

  <p>The <dfn id=report-validity-steps>report validity steps</dfn> for an element <var>element</var> are:</p>

  <ol><li>
    <p>If <var>element</var> is a <a href=#candidate-for-constraint-validation id=the-constraint-validation-api:candidate-for-constraint-validation-4>candidate for constraint validation</a> and does not
    <a href=#concept-fv-valid id=the-constraint-validation-api:concept-fv-valid-2>satisfy its constraints</a>, then:

    <ol><li><p>Let <var>report</var> be the result of <a href=https://dom.spec.whatwg.org/#concept-event-fire id=the-constraint-validation-api:concept-event-fire-2 data-x-internal=concept-event-fire>firing an
     event</a> named <code id=the-constraint-validation-api:event-invalid-4><a href=indices.html#event-invalid>invalid</a></code> at <var>element</var>, with the
     <code id=the-constraint-validation-api:dom-event-cancelable-2><a data-x-internal=dom-event-cancelable href=https://dom.spec.whatwg.org/#dom-event-cancelable>cancelable</a></code> attribute initialized to true.<li><p>If <var>report</var> is true, then report the problems with the constraints of this
     element to the user. When reporting the problem with the constraints to the user, the user
     agent may run the <a id=the-constraint-validation-api:focusing-steps href=interaction.html#focusing-steps>focusing steps</a> for <var>element</var>, and may change the
     scrolling position of the document, or perform some other action that brings <var>element</var>
     to the user's attention. User agents may report more than one constraint violation, if
     <var>element</var> suffers from multiple problems at once.</p>

     <li><p>Return false.</ol>

   <li><p>Return true.</ol>

  <p>The <dfn data-dfn-for=HTMLObjectElement,HTMLInputElement,HTMLButtonElement,HTMLSelectElement,HTMLTextAreaElement,HTMLOutputElement,HTMLFieldSetElement id=dom-cva-reportvalidity data-dfn-type=method><code>reportValidity()</code></dfn> method, when invoked, must run the
  <a href=#report-validity-steps id=the-constraint-validation-api:report-validity-steps>report validity steps</a> on this element.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/reportValidity title="The reportValidity() method of the ElementInternals interface checks if the element meets any constraint validation rules applied to it.">ElementInternals/reportValidity</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>98+</span></span><span class="safari yes"><span>Safari</span><span>16.4+</span></span><span class="chrome yes"><span>Chrome</span><span>77+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=ElementInternals id=dom-elementinternals-reportvalidity data-dfn-type=method><code>reportValidity()</code></dfn> method of the
  <code id=the-constraint-validation-api:elementinternals-5><a href=custom-elements.html#elementinternals>ElementInternals</a></code> interface must run these steps:</p>

  <ol><li><p>Let <var>element</var> be this <code id=the-constraint-validation-api:elementinternals-6><a href=custom-elements.html#elementinternals>ElementInternals</a></code>'s <a href=custom-elements.html#internals-target id=the-constraint-validation-api:internals-target-6>target element</a>.<li><p>If <var>element</var> is not a <a id=the-constraint-validation-api:form-associated-custom-element-4 href=custom-elements.html#form-associated-custom-element>form-associated custom element</a>, then throw a
   <a id=the-constraint-validation-api:notsupportederror-4 href=https://webidl.spec.whatwg.org/#notsupportederror data-x-internal=notsupportederror>"<code>NotSupportedError</code>"</a> <code id=the-constraint-validation-api:domexception-4><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Run the <a href=#report-validity-steps id=the-constraint-validation-api:report-validity-steps-2>report validity steps</a> on <var>element</var>.</ol>

  <p>The <dfn data-dfn-for=HTMLObjectElement,HTMLInputElement,HTMLButtonElement,HTMLSelectElement,HTMLTextAreaElement,HTMLOutputElement,HTMLFieldSetElement id=dom-cva-validationmessage data-dfn-type=attribute><code>validationMessage</code></dfn> attribute's getter must run
  these steps:</p>

  <ol><li><p>If this element is not a <a href=#candidate-for-constraint-validation id=the-constraint-validation-api:candidate-for-constraint-validation-5>candidate for constraint validation</a> or if this
   element <a href=#concept-fv-valid id=the-constraint-validation-api:concept-fv-valid-3>satisfies its constraints</a>, then return the empty
   string.<li><p>Return a suitably localized message that the user agent would show the user if this were
   the only form control with a validity constraint problem. If the user agent would not actually
   show a textual message in such a situation (e.g., it would show a graphical cue instead), then
   return a suitably localized message that expresses (one or more of) the validity constraint(s)
   that the control does not satisfy. If the element is a <a href=#candidate-for-constraint-validation id=the-constraint-validation-api:candidate-for-constraint-validation-6>candidate for constraint
   validation</a> and is <a href=#suffering-from-a-custom-error id=the-constraint-validation-api:suffering-from-a-custom-error-2>suffering from a custom error</a>, then the
   <a href=#custom-validity-error-message id=the-constraint-validation-api:custom-validity-error-message-2>custom validity error message</a> should be present in the return value.</ol>

  


  <h5 id=security-forms><span class=secno>4.10.21.4</span> Security<a href=#security-forms class=self-link></a></h5>

  <p id=security-0>Servers should not rely on client-side validation. Client-side validation can
  be intentionally bypassed by hostile users, and unintentionally bypassed by users of older user
  agents or automated tools that do not implement these features. The constraint validation features
  are only intended to improve the user experience, not to provide any kind of security
  mechanism.</p>




  <h4 id=form-submission-2><span class=secno>4.10.22</span> <dfn id=form-submission>Form submission</dfn><a href=#form-submission-2 class=self-link></a></h4>

  

  <h5 id=introduction-5><span class=secno>4.10.22.1</span> Introduction<a href=#introduction-5 class=self-link></a></h5>

  

  <p><i>This section is non-normative.</i></p>

  <p>When a form is submitted, the data in the form is converted into the structure specified by the
  <a href=#concept-fs-enctype id=introduction-5:concept-fs-enctype>enctype</a>, and then sent to the destination specified by the
  <a href=#concept-fs-action id=introduction-5:concept-fs-action>action</a> using the given <a href=#concept-fs-method id=introduction-5:concept-fs-method>method</a>.</p>

  <p>For example, take the following form:</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;/find.cgi&quot;</c-> <c- e>method</c-><c- o>=</c-><c- s>get</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>text</c-> <c- e>name</c-><c- o>=</c-><c- s>t</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>search</c-> <c- e>name</c-><c- o>=</c-><c- s>q</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  <p>If the user types in "cats" in the first field and "fur" in the second, and then hits the
  submit button, then the user agent will load <code>/find.cgi?t=cats&amp;q=fur</code>.</p>

  <p>On the other hand, consider this form:</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;/find.cgi&quot;</c-> <c- e>method</c-><c- o>=</c-><c- s>post</c-> <c- e>enctype</c-><c- o>=</c-><c- s>&quot;multipart/form-data&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>text</c-> <c- e>name</c-><c- o>=</c-><c- s>t</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>search</c-> <c- e>name</c-><c- o>=</c-><c- s>q</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  <p>Given the same user input, the result on submission is quite different: the user agent instead
  does an HTTP POST to the given URL, with as the entity body something like the following text:</p>

  <pre>------kYFrd4jNJEgCervE
Content-Disposition: form-data; name="t"

cats
------kYFrd4jNJEgCervE
Content-Disposition: form-data; name="q"

fur
------kYFrd4jNJEgCervE--</pre>



  

  <h5 id=implicit-submission><span class=secno>4.10.22.2</span> Implicit submission<a href=#implicit-submission class=self-link></a></h5>

  <p>A <code id=implicit-submission:the-form-element><a href=forms.html#the-form-element>form</a></code> element's <dfn id=default-button>default button</dfn> is the first <a href=forms.html#concept-submit-button id=implicit-submission:concept-submit-button>submit button</a> in <a id=implicit-submission:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a> whose <a href=#form-owner id=implicit-submission:form-owner>form
  owner</a> is that <code id=implicit-submission:the-form-element-2><a href=forms.html#the-form-element>form</a></code> element.</p>

  <p>If the user agent supports letting the user submit a form implicitly (for example, on some
  platforms hitting the "enter" key while a text control is <a id=implicit-submission:focused href=interaction.html#focused>focused</a> implicitly submits
  the form), then doing so for a form, whose <a href=#default-button id=implicit-submission:default-button>default button</a> has <a id=implicit-submission:activation-behaviour href=https://dom.spec.whatwg.org/#eventtarget-activation-behavior data-x-internal=activation-behaviour>activation
  behavior</a> and is not <a href=#concept-fe-disabled id=implicit-submission:concept-fe-disabled>disabled</a>, must cause the user
  agent to <a id=implicit-submission:fire-a-click-event href=webappapis.html#fire-a-click-event>fire a <code>click</code> event</a> at that <a href=#default-button id=implicit-submission:default-button-2>default
  button</a>.</p>

  <p class=note>There are pages on the web that are only usable if there is a way to implicitly
  submit forms, so user agents are strongly encouraged to support this.</p>

  <p>If the form has
  no <a href=forms.html#concept-submit-button id=implicit-submission:concept-submit-button-2>submit button</a>, then the implicit submission
  mechanism must perform the following steps:

  <ol><li><p>If the form has more than one <a href=#field-that-blocks-implicit-submission id=implicit-submission:field-that-blocks-implicit-submission>field that blocks implicit submission</a>, then
   return.<li><p><a href=#concept-form-submit id=implicit-submission:concept-form-submit>Submit</a> the <code id=implicit-submission:the-form-element-3><a href=forms.html#the-form-element>form</a></code> element from the
   <code id=implicit-submission:the-form-element-4><a href=forms.html#the-form-element>form</a></code> element itself with <i id=implicit-submission:submit-user-involvement><a href=#submit-user-involvement>userInvolvement</a></i> set
   to "<code id=implicit-submission:uni-activation><a href=browsing-the-web.html#uni-activation>activation</a></code>".</ol>

  <p>For the purpose of the previous paragraph, an element is a <dfn id=field-that-blocks-implicit-submission>field that blocks implicit
  submission</dfn> of a <code id=implicit-submission:the-form-element-5><a href=forms.html#the-form-element>form</a></code> element if it is an <code id=implicit-submission:the-input-element><a href=input.html#the-input-element>input</a></code> element whose
  <a href=#form-owner id=implicit-submission:form-owner-2>form owner</a> is that <code id=implicit-submission:the-form-element-6><a href=forms.html#the-form-element>form</a></code> element and whose <code id=implicit-submission:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute is in one of the following states:
  <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="implicit-submission:text-(type=text)-state-and-search-state-(type=search)">Text</a>,
  <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="implicit-submission:text-(type=text)-state-and-search-state-(type=search)-2">Search</a>,
  <a href="input.html#telephone-state-(type=tel)" id="implicit-submission:telephone-state-(type=tel)">Telephone</a>,
  <a href="input.html#url-state-(type=url)" id="implicit-submission:url-state-(type=url)">URL</a>,
  <a href="input.html#email-state-(type=email)" id="implicit-submission:email-state-(type=email)">Email</a>,
  <a href="input.html#password-state-(type=password)" id="implicit-submission:password-state-(type=password)">Password</a>,
  <a href="input.html#date-state-(type=date)" id="implicit-submission:date-state-(type=date)">Date</a>,
  <a href="input.html#month-state-(type=month)" id="implicit-submission:month-state-(type=month)">Month</a>,
  <a href="input.html#week-state-(type=week)" id="implicit-submission:week-state-(type=week)">Week</a>,
  <a href="input.html#time-state-(type=time)" id="implicit-submission:time-state-(type=time)">Time</a>,
  <a href="input.html#local-date-and-time-state-(type=datetime-local)" id="implicit-submission:local-date-and-time-state-(type=datetime-local)">Local Date and Time</a>,
  <a href="input.html#number-state-(type=number)" id="implicit-submission:number-state-(type=number)">Number</a>
  </p>

  


  

  <h5 id=form-submission-algorithm><span class=secno>4.10.22.3</span> Form submission algorithm<a href=#form-submission-algorithm class=self-link></a></h5>

  <p>Each <code id=form-submission-algorithm:the-form-element><a href=forms.html#the-form-element>form</a></code> element has a <dfn id=constructing-entry-list>constructing entry list</dfn> boolean, initially
  false.</p>

  <p>Each <code id=form-submission-algorithm:the-form-element-2><a href=forms.html#the-form-element>form</a></code> element has a <dfn id=firing-submission-events>firing submission events</dfn> boolean, initially
  false.</p>

  <p>To <dfn id=concept-form-submit>submit</dfn> a <code id=form-submission-algorithm:the-form-element-3><a href=forms.html#the-form-element>form</a></code> element <var>form</var>
  from an element <var>submitter</var> (typically a button), given an optional boolean <dfn id=submit-subbmitted-from-method><var>submitted from <code>submit()</code> method</var></dfn> (default false) and an optional
  <a id=form-submission-algorithm:user-navigation-involvement href=browsing-the-web.html#user-navigation-involvement>user navigation involvement</a> <dfn id=submit-user-involvement><var>userInvolvement</var></dfn> (default "<code id=form-submission-algorithm:uni-none><a href=browsing-the-web.html#uni-none>none</a></code>"):</p>

  <ol><li><p>If <var>form</var> <a id=form-submission-algorithm:cannot-navigate href=links.html#cannot-navigate>cannot navigate</a>, then return.<li><p>If <var>form</var>'s <a href=#constructing-entry-list id=form-submission-algorithm:constructing-entry-list>constructing entry list</a> is true, then return.<li><p>Let <var>form document</var> be <var>form</var>'s <a id=form-submission-algorithm:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li id=sandboxSubmitBlocked><p>If <var>form document</var>'s <a id=form-submission-algorithm:active-sandboxing-flag-set href=browsers.html#active-sandboxing-flag-set>active sandboxing flag
   set</a> has its <a id=form-submission-algorithm:sandboxed-forms-browsing-context-flag href=browsers.html#sandboxed-forms-browsing-context-flag>sandboxed forms browsing context flag</a> set, then return.<li>
    <p>If <var>submitted from <code id=form-submission-algorithm:dom-form-submit><a href=forms.html#dom-form-submit>submit()</a></code> method</var> is false,
    then:</p>

    <ol><li><p>If <var>form</var>'s <a href=#firing-submission-events id=form-submission-algorithm:firing-submission-events>firing submission events</a> is true, then
     return.<li><p>Set <var>form</var>'s <a href=#firing-submission-events id=form-submission-algorithm:firing-submission-events-2>firing submission events</a> to true.<li><p>For each element <var>field</var> in the list of
     <a href=forms.html#category-submit id=form-submission-algorithm:category-submit>submittable elements</a> whose <a href=#form-owner id=form-submission-algorithm:form-owner>form owner</a> is
     <var>form</var>, set <var>field</var>'s <a href=#user-validity id=form-submission-algorithm:user-validity>user validity</a> to true.

     <li>
      <p>If the <var>submitter</var> element's <a href=#concept-fs-novalidate id=form-submission-algorithm:concept-fs-novalidate>no-validate
      state</a> is false, then <a href=#interactively-validate-the-constraints id=form-submission-algorithm:interactively-validate-the-constraints>interactively validate the constraints</a> of
      <var>form</var> and examine the result. If the result is negative (i.e., the constraint
      validation concluded that there were invalid fields and probably informed the user of this),
      then:</p>

      <ol><li><p>Set <var>form</var>'s <a href=#firing-submission-events id=form-submission-algorithm:firing-submission-events-3>firing submission events</a> to false.<li><p>Return.</ol>
     <li><p>Let <var>submitterButton</var> be null if <var>submitter</var> is <var>form</var>.
     Otherwise, let <var>submitterButton</var> be <var>submitter</var>.<li><p>Let <var>shouldContinue</var> be the result of <a href=https://dom.spec.whatwg.org/#concept-event-fire id=form-submission-algorithm:concept-event-fire data-x-internal=concept-event-fire>firing an
     event</a> named <code id=form-submission-algorithm:event-submit><a href=indices.html#event-submit>submit</a></code> at <var>form</var> using
     <code id=form-submission-algorithm:submitevent><a href=#submitevent>SubmitEvent</a></code>, with the <code id=form-submission-algorithm:dom-submitevent-submitter><a href=#dom-submitevent-submitter>submitter</a></code>
     attribute initialized to <var>submitterButton</var>, the <code id=form-submission-algorithm:dom-event-bubbles><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code> attribute initialized to true, and the <code id=form-submission-algorithm:dom-event-cancelable><a data-x-internal=dom-event-cancelable href=https://dom.spec.whatwg.org/#dom-event-cancelable>cancelable</a></code> attribute initialized to true.<li><p>Set <var>form</var>'s <a href=#firing-submission-events id=form-submission-algorithm:firing-submission-events-4>firing submission events</a> to false.<li><p>If <var>shouldContinue</var> is false, then return.<li>
      <p>If <var>form</var> <a id=form-submission-algorithm:cannot-navigate-2 href=links.html#cannot-navigate>cannot navigate</a>, then return.</p>

      <p class=note><a id=form-submission-algorithm:cannot-navigate-3 href=links.html#cannot-navigate>Cannot navigate</a> is run again as dispatching the <code id=form-submission-algorithm:event-submit-2><a href=indices.html#event-submit>submit</a></code> event could have changed the outcome.</p>
     </ol>
   <li><p>Let <var>encoding</var> be the result of <a href=#picking-an-encoding-for-the-form id=form-submission-algorithm:picking-an-encoding-for-the-form>picking an encoding for the
   form</a>.</p>

   <li><p>Let <var>entry list</var> be the result of <a href=#constructing-the-form-data-set id=form-submission-algorithm:constructing-the-form-data-set>constructing the entry list</a> with
   <var>form</var>, <var>submitter</var>, and <var>encoding</var>.<li><p><a id=form-submission-algorithm:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>entry list</var> is not null.<li>
    <p>If <var>form</var> <a id=form-submission-algorithm:cannot-navigate-4 href=links.html#cannot-navigate>cannot navigate</a>, then return.</p>

    <p class=note><a id=form-submission-algorithm:cannot-navigate-5 href=links.html#cannot-navigate>Cannot navigate</a> is run again as dispatching the <code id=form-submission-algorithm:event-formdata><a href=indices.html#event-formdata>formdata</a></code> event in <a href=#constructing-the-form-data-set id=form-submission-algorithm:constructing-the-form-data-set-2>constructing the entry list</a>
    could have changed the outcome.</p>
   <li><p>Let <var>method</var> be the <var>submitter</var> element's <a href=#concept-fs-method id=form-submission-algorithm:concept-fs-method>method</a>.<li>
    <p>If <var>method</var> is <a href=#attr-fs-method-dialog id=form-submission-algorithm:attr-fs-method-dialog>dialog</a>, then:

    <ol><li><p>If <var>form</var> does not have an ancestor <code id=form-submission-algorithm:the-dialog-element><a href=interactive-elements.html#the-dialog-element>dialog</a></code> element, then
     return.<li><p>Let <var>subject</var> be <var>form</var>'s nearest ancestor <code id=form-submission-algorithm:the-dialog-element-2><a href=interactive-elements.html#the-dialog-element>dialog</a></code>
     element.<li><p>Let <var>result</var> be null.<li>
      <p>If <var>submitter</var> is an <code id=form-submission-algorithm:the-input-element><a href=input.html#the-input-element>input</a></code> element whose <code id=form-submission-algorithm:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#image-button-state-(type=image)" id="form-submission-algorithm:image-button-state-(type=image)">Image Button</a> state, then:</p>

      <ol><li><p>Let (<var>x</var>, <var>y</var>) be the <a href=input.html#concept-input-type-image-coordinate id=form-submission-algorithm:concept-input-type-image-coordinate>selected coordinate</a>.<li><p>Set <var>result</var> to the concatenation of <var>x</var>, "<code>,</code>", and <var>y</var>.</ol>
     <li><p>Otherwise, if <var>submitter</var> is a <a href=forms.html#concept-submit-button id=form-submission-algorithm:concept-submit-button>submit
     button</a>, then set <var>result</var> to <var>submitter</var>'s <a href=#concept-fe-optional-value id=form-submission-algorithm:concept-fe-optional-value>optional value</a>.<li><p><a id=form-submission-algorithm:close-the-dialog href=interactive-elements.html#close-the-dialog>Close the dialog</a> <var>subject</var> with <var>result</var> and
     null.<li><p>Return.</ol>
   <li><p>Let <var>action</var> be the <var>submitter</var> element's <a href=#concept-fs-action id=form-submission-algorithm:concept-fs-action>action</a>.<li>
    <p>If <var>action</var> is the empty string, let <var>action</var> be the <a href=https://dom.spec.whatwg.org/#concept-document-url id="form-submission-algorithm:the-document's-address" data-x-internal="the-document's-address">URL</a> of the <var>form document</var>.</p>

    
   <li><p>Let <var>parsed action</var> be the result of <a id=form-submission-algorithm:encoding-parsing-a-url href=urls-and-fetching.html#encoding-parsing-a-url>encoding-parsing a URL</a> given
   <var>action</var>, relative to <var>submitter</var>'s <a id=form-submission-algorithm:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li><p>If <var>parsed action</var> is failure, then return.<li><p>Let <var>scheme</var> be the <a href=https://url.spec.whatwg.org/#concept-url-scheme id=form-submission-algorithm:concept-url-scheme data-x-internal=concept-url-scheme>scheme</a> of
   <var>parsed action</var>.<li><p>Let <var>enctype</var> be the <var>submitter</var> element's <a href=#concept-fs-enctype id=form-submission-algorithm:concept-fs-enctype>enctype</a>.<li><p>Let <var>formTarget</var> be null.<li><p>If the <var>submitter</var> element is a <a href=forms.html#concept-submit-button id=form-submission-algorithm:concept-submit-button-2>submit
   button</a> and it has a <code id=form-submission-algorithm:attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code> attribute, then
   set <var>formTarget</var> to the <code id=form-submission-algorithm:attr-fs-formtarget-2><a href=#attr-fs-formtarget>formtarget</a></code> attribute
   value.<li><p>Let <var>target</var> be the result of <a href="semantics.html#get-an-element's-target" id="form-submission-algorithm:get-an-element's-target">getting an
   element's target</a> given <var>submitter</var>'s <a href=#form-owner id=form-submission-algorithm:form-owner-2>form owner</a> and
   <var>formTarget</var>.<li><p>Let <var>noopener</var> be the result of <a href="links.html#get-an-element's-noopener" id="form-submission-algorithm:get-an-element's-noopener">getting
   an element's noopener</a> with <var>form</var>, <var>parsed action</var>, and
   <var>target</var>.<li><p>Let <var>targetNavigable</var> be the first return value of applying <a id=form-submission-algorithm:the-rules-for-choosing-a-navigable href=document-sequences.html#the-rules-for-choosing-a-navigable>the rules for
   choosing a navigable</a> given <var>target</var>, <var>form</var>'s <a id=form-submission-algorithm:node-navigable href=document-sequences.html#node-navigable>node
   navigable</a>, and <var>noopener</var>.<li><p>If <var>targetNavigable</var> is null, then return.<li><p>Let <var>historyHandling</var> be "<code id=form-submission-algorithm:navigationhistorybehavior-auto><a href=browsing-the-web.html#navigationhistorybehavior-auto>auto</a></code>".<li><p>If <var>form document</var> equals <var>targetNavigable</var>'s <a href=document-sequences.html#nav-document id=form-submission-algorithm:nav-document>active document</a>, and <var>form document</var> has not yet
   <a id=form-submission-algorithm:completely-loaded href=document-lifecycle.html#completely-loaded>completely loaded</a>, then set <var>historyHandling</var> to "<code id=form-submission-algorithm:navigationhistorybehavior-replace><a href=browsing-the-web.html#navigationhistorybehavior-replace>replace</a></code>".<li>
    <p>Select the appropriate row in the table below based on <var>scheme</var> as given by the
    first cell of each row. Then, select the appropriate cell on that row based on <var>method</var>
    as given in the first cell of each column. Then, jump to the steps named in that cell and
    defined below the table.</p>

    <table><thead><tr><td>
      <th> <a href=#attr-fs-method-get id=form-submission-algorithm:attr-fs-method-get>GET</a>
      <th> <a href=#attr-fs-method-post id=form-submission-algorithm:attr-fs-method-post>POST</a>
     <tbody><tr><th> <code>http</code>
      <td> <a href=#submit-mutate-action id=form-submission-algorithm:submit-mutate-action>Mutate action URL</a>
      <td> <a href=#submit-body id=form-submission-algorithm:submit-body>Submit as entity body</a>
     <tr><th> <code>https</code>
      <td> <a href=#submit-mutate-action id=form-submission-algorithm:submit-mutate-action-2>Mutate action URL</a>
      <td> <a href=#submit-body id=form-submission-algorithm:submit-body-2>Submit as entity body</a>
     <tr><th> <code>ftp</code>
      <td> <a href=#submit-get-action id=form-submission-algorithm:submit-get-action>Get action URL</a>
      <td> <a href=#submit-get-action id=form-submission-algorithm:submit-get-action-2>Get action URL</a>
     <tr><th> <code>javascript</code>
      <td> <a href=#submit-get-action id=form-submission-algorithm:submit-get-action-3>Get action URL</a>
      <td> <a href=#submit-get-action id=form-submission-algorithm:submit-get-action-4>Get action URL</a>
     <tr><th> <code>data</code>
      <td> <a href=#submit-mutate-action id=form-submission-algorithm:submit-mutate-action-3>Mutate action URL</a>
      <td> <a href=#submit-get-action id=form-submission-algorithm:submit-get-action-5>Get action URL</a>
     <tr><th> <code>mailto</code>
      <td> <a href=#submit-mailto-headers id=form-submission-algorithm:submit-mailto-headers>Mail with headers</a>
      <td> <a href=#submit-mailto-body id=form-submission-algorithm:submit-mailto-body>Mail as body</a>
    </table>

    <p>If <var>scheme</var> is not one of those listed in this table, then the behavior is
    not defined by this specification. User agents should, in the absence of another specification
    defining this, act in a manner analogous to that defined in this specification for similar
    schemes.</p>

    <p>Each <code id=form-submission-algorithm:the-form-element-4><a href=forms.html#the-form-element>form</a></code> element has a <dfn id=planned-navigation>planned navigation</dfn>, which is either null or a
    <a href=webappapis.html#concept-task id=form-submission-algorithm:concept-task>task</a>; when the <code id=form-submission-algorithm:the-form-element-5><a href=forms.html#the-form-element>form</a></code> is first created, its
    <a href=#planned-navigation id=form-submission-algorithm:planned-navigation>planned navigation</a> must be set to null. In the behaviors described below, when the
    user agent is required to <dfn id=plan-to-navigate>plan to navigate</dfn> to a <a id=form-submission-algorithm:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>url</var> given
    an optional <a id=form-submission-algorithm:post-resource href=browsing-the-web.html#post-resource>POST resource</a>-or-null <var>postResource</var> (default null), it must
    run the following steps:</p>

    <ol><li><p>Let <var>referrerPolicy</var> be the empty string.<li><p>If the <code id=form-submission-algorithm:the-form-element-6><a href=forms.html#the-form-element>form</a></code> element's <a href=links.html#linkTypes>link types</a> include the <code id=form-submission-algorithm:link-type-noreferrer><a href=links.html#link-type-noreferrer>noreferrer</a></code> keyword, then set <var>referrerPolicy</var> to "<code>no-referrer</code>".<li><p>If the <code id=form-submission-algorithm:the-form-element-7><a href=forms.html#the-form-element>form</a></code> has a non-null <a href=#planned-navigation id=form-submission-algorithm:planned-navigation-2>planned navigation</a>, remove it from
     its <a id=form-submission-algorithm:task-queue href=webappapis.html#task-queue>task queue</a>.<li>
      <p><a id=form-submission-algorithm:queue-an-element-task href=webappapis.html#queue-an-element-task>Queue an element task</a> on the <a id=form-submission-algorithm:dom-manipulation-task-source href=webappapis.html#dom-manipulation-task-source>DOM manipulation task source</a> given
      the <code id=form-submission-algorithm:the-form-element-8><a href=forms.html#the-form-element>form</a></code> element and the following steps:</p>

      <ol><li><p>Set the <code id=form-submission-algorithm:the-form-element-9><a href=forms.html#the-form-element>form</a></code>'s <a href=#planned-navigation id=form-submission-algorithm:planned-navigation-3>planned navigation</a> to null.<li><p><a id=form-submission-algorithm:navigate href=browsing-the-web.html#navigate>Navigate</a> <var>targetNavigable</var> to <var>url</var>
       using the <code id=form-submission-algorithm:the-form-element-10><a href=forms.html#the-form-element>form</a></code> element's <a id=form-submission-algorithm:node-document-3 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>, with <i id=form-submission-algorithm:navigation-hh><a href=browsing-the-web.html#navigation-hh>historyHandling</a></i> set to <var>historyHandling</var>, <i id=form-submission-algorithm:navigation-user-involvement><a href=browsing-the-web.html#navigation-user-involvement>userInvolvement</a></i> set to <var>userInvolvement</var>,
       <i id=form-submission-algorithm:navigation-source-element><a href=browsing-the-web.html#navigation-source-element>sourceElement</a></i> set to <var>submitter</var>,
       <i id=form-submission-algorithm:navigation-referrer-policy><a href=browsing-the-web.html#navigation-referrer-policy>referrerPolicy</a></i> set to <var>referrerPolicy</var>,
       <i id=form-submission-algorithm:navigation-resource><a href=browsing-the-web.html#navigation-resource>documentResource</a></i> set to <var>postResource</var>, and <i id=form-submission-algorithm:navigation-form-data-entry-list><a href=browsing-the-web.html#navigation-form-data-entry-list>formDataEntryList</a></i> set to <var>entry
       list</var>.</p>
      </ol>
     <li><p>Set the <code id=form-submission-algorithm:the-form-element-11><a href=forms.html#the-form-element>form</a></code>'s <a href=#planned-navigation id=form-submission-algorithm:planned-navigation-4>planned navigation</a> to the just-queued <a href=webappapis.html#concept-task id=form-submission-algorithm:concept-task-2>task</a>.</p>
    </ol>

    <p>The behaviors are as follows:</p>

    <dl><dt><dfn id=submit-mutate-action>Mutate action URL</dfn>
     <dd>
      <p>Let <var>pairs</var> be the result of <a href=#convert-to-a-list-of-name-value-pairs id=form-submission-algorithm:convert-to-a-list-of-name-value-pairs>converting to a list of name-value pairs</a> with <var>entry list</var>.</p>

      <p>Let <var>query</var> be the result of running the
      <a id=form-submission-algorithm:application/x-www-form-urlencoded-serializer href=https://url.spec.whatwg.org/#concept-urlencoded-serializer data-x-internal=application/x-www-form-urlencoded-serializer><code>application/x-www-form-urlencoded</code> serializer</a> with <var>pairs</var>
      and <var>encoding</var>.</p>

      <p>Set <var>parsed action</var>'s <a href=https://url.spec.whatwg.org/#concept-url-query id=form-submission-algorithm:concept-url-query data-x-internal=concept-url-query>query</a>
      component to <var>query</var>.</p>

      <p><a href=#plan-to-navigate id=form-submission-algorithm:plan-to-navigate>Plan to navigate</a> to <var>parsed action</var>.</p>
     <dt><dfn id=submit-body>Submit as entity body</dfn>
     <dd>
      <p><a id=form-submission-algorithm:assert-2 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>method</var> is <a href=#attr-fs-method-post id=form-submission-algorithm:attr-fs-method-post-2>POST</a>.</p>

      <p>Switch on <var>enctype</var>:

      <dl class=switch><dt><code id=form-submission-algorithm:attr-fs-enctype-urlencoded><a href=#attr-fs-enctype-urlencoded>application/x-www-form-urlencoded</a></code><dd>
        <p>Let <var>pairs</var> be the result of <a href=#convert-to-a-list-of-name-value-pairs id=form-submission-algorithm:convert-to-a-list-of-name-value-pairs-2>converting to a list of name-value pairs</a> with <var>entry list</var>.</p>

        <p>Let <var>body</var> be the result of running the
        <a id=form-submission-algorithm:application/x-www-form-urlencoded-serializer-2 href=https://url.spec.whatwg.org/#concept-urlencoded-serializer data-x-internal=application/x-www-form-urlencoded-serializer><code>application/x-www-form-urlencoded</code> serializer</a> with <var>pairs</var>
        and <var>encoding</var>.</p>

        <p>Set <var>body</var> to the result of <a href=https://encoding.spec.whatwg.org/#utf-8-encode id=form-submission-algorithm:utf-8-encode data-x-internal=utf-8-encode>encoding</a>
        <var>body</var>.</p>

        <p>Let <var>mimeType</var> be `<code id=form-submission-algorithm:application/x-www-form-urlencoded><a data-x-internal=application/x-www-form-urlencoded href=https://url.spec.whatwg.org/#concept-urlencoded>application/x-www-form-urlencoded</a></code>`.</p>
       <dt><code id=form-submission-algorithm:attr-fs-enctype-formdata><a href=#attr-fs-enctype-formdata>multipart/form-data</a></code><dd>
        <p>Let <var>body</var> be the result of running the <a href=#multipart/form-data-encoding-algorithm id=form-submission-algorithm:multipart/form-data-encoding-algorithm><code>multipart/form-data</code> encoding algorithm</a> with <var>entry list</var>
        and <var>encoding</var>.</p>

        <p>Let <var>mimeType</var> be the <a href=https://infra.spec.whatwg.org/#isomorphic-encode id=form-submission-algorithm:isomorphic-encode data-x-internal=isomorphic-encode>isomorphic
        encoding</a> of the concatenation of "<code>multipart/form-data; boundary=</code>" and the <a href=#multipart/form-data-boundary-string id=form-submission-algorithm:multipart/form-data-boundary-string><code>multipart/form-data</code> boundary string</a> generated by the <a href=#multipart/form-data-encoding-algorithm id=form-submission-algorithm:multipart/form-data-encoding-algorithm-2><code>multipart/form-data</code> encoding algorithm</a>.</p>
       <dt><code id=form-submission-algorithm:attr-fs-enctype-text><a href=#attr-fs-enctype-text>text/plain</a></code><dd>
        <p>Let <var>pairs</var> be the result of <a href=#convert-to-a-list-of-name-value-pairs id=form-submission-algorithm:convert-to-a-list-of-name-value-pairs-3>converting to a list of name-value pairs</a> with <var>entry list</var>.</p>

        <p>Let <var>body</var> be the result of running the <a href=#text/plain-encoding-algorithm id=form-submission-algorithm:text/plain-encoding-algorithm><code>text/plain</code>
        encoding algorithm</a> with <var>pairs</var>.</p>

        <p>Set <var>body</var> to the result of <a href=https://encoding.spec.whatwg.org/#encode id=form-submission-algorithm:encode data-x-internal=encode>encoding</a>
        <var>body</var> using <var>encoding</var>.</p>

        <p>Let <var>mimeType</var> be `<code id=form-submission-algorithm:text/plain><a data-x-internal=text/plain href=https://www.rfc-editor.org/rfc/rfc2046#section-4.1.3>text/plain</a></code>`.</p>
       </dl>

      <p><a href=#plan-to-navigate id=form-submission-algorithm:plan-to-navigate-2>Plan to navigate</a> to <var>parsed action</var> given a <a id=form-submission-algorithm:post-resource-2 href=browsing-the-web.html#post-resource>POST
      resource</a> whose <a href=browsing-the-web.html#post-resource-request-body id=form-submission-algorithm:post-resource-request-body>request body</a> is
      <var>body</var> and <a href=browsing-the-web.html#post-resource-request-content-type id=form-submission-algorithm:post-resource-request-content-type>request
      content-type</a> is <var>mimeType</var>.</p>
     <dt><dfn id=submit-get-action>Get action URL</dfn>
     <dd>
      <p><a href=#plan-to-navigate id=form-submission-algorithm:plan-to-navigate-3>Plan to navigate</a> to <var>parsed action</var>.</p>

      <p class=note><var>entry list</var> is discarded.</p>
     <dt><dfn id=submit-mailto-headers>Mail with headers</dfn>
     <dd>
      <p>Let <var>pairs</var> be the result of <a href=#convert-to-a-list-of-name-value-pairs id=form-submission-algorithm:convert-to-a-list-of-name-value-pairs-4>converting to a list of name-value pairs</a> with <var>entry list</var>.</p>

      <p>Let <var>headers</var> be the result of running the
      <a id=form-submission-algorithm:application/x-www-form-urlencoded-serializer-3 href=https://url.spec.whatwg.org/#concept-urlencoded-serializer data-x-internal=application/x-www-form-urlencoded-serializer><code>application/x-www-form-urlencoded</code> serializer</a> with <var>pairs</var>
      and <var>encoding</var>.</p>

      <p>Replace occurrences of U+002B PLUS SIGN characters (+) in <var>headers</var> with
      the string "<code>%20</code>".</p>

      <p>Set <var>parsed action</var>'s <a href=https://url.spec.whatwg.org/#concept-url-query id=form-submission-algorithm:concept-url-query-2 data-x-internal=concept-url-query>query</a> to
      <var>headers</var>.</p>

      <p><a href=#plan-to-navigate id=form-submission-algorithm:plan-to-navigate-4>Plan to navigate</a> to <var>parsed action</var>.</p>
     <dt><dfn id=submit-mailto-body>Mail as body</dfn>
     <dd>
      <p>Let <var>pairs</var> be the result of <a href=#convert-to-a-list-of-name-value-pairs id=form-submission-algorithm:convert-to-a-list-of-name-value-pairs-5>converting to a list of name-value pairs</a> with <var>entry list</var>.</p>

      <p>Switch on <var>enctype</var>:

      <dl class=switch><dt><code id=form-submission-algorithm:attr-fs-enctype-text-2><a href=#attr-fs-enctype-text>text/plain</a></code><dd>
        <p>Let <var>body</var> be the result of running the <a href=#text/plain-encoding-algorithm id=form-submission-algorithm:text/plain-encoding-algorithm-2><code>text/plain</code>
        encoding algorithm</a> with <var>pairs</var>.</p>

        <p>Set <var>body</var> to the result of running <a id=form-submission-algorithm:utf-8-percent-encode href=https://url.spec.whatwg.org/#string-utf-8-percent-encode data-x-internal=utf-8-percent-encode>UTF-8 percent-encode</a> on
        <var>body</var> using the <a id=form-submission-algorithm:default-encode-set href=https://url.spec.whatwg.org/#default-encode-set data-x-internal=default-encode-set>default encode set</a>. <a href=references.html#refsURL>[URL]</a></p>
       <dt>Otherwise<dd><p>Let <var>body</var> be the result of running the
       <a id=form-submission-algorithm:application/x-www-form-urlencoded-serializer-4 href=https://url.spec.whatwg.org/#concept-urlencoded-serializer data-x-internal=application/x-www-form-urlencoded-serializer><code>application/x-www-form-urlencoded</code> serializer</a> with <var>pairs</var>
       and <var>encoding</var>.</dl>

      <p>If <var>parsed action</var>'s <a href=https://url.spec.whatwg.org/#concept-url-query id=form-submission-algorithm:concept-url-query-3 data-x-internal=concept-url-query>query</a> is null, then
      set it to the empty string.

      <p>If <var>parsed action</var>'s <a href=https://url.spec.whatwg.org/#concept-url-query id=form-submission-algorithm:concept-url-query-4 data-x-internal=concept-url-query>query</a> is not the
      empty string, then append a single U+0026 AMPERSAND character (&amp;) to it.

      <p>Append "<code>body=</code>" to <var>parsed action</var>'s <a href=https://url.spec.whatwg.org/#concept-url-query id=form-submission-algorithm:concept-url-query-5 data-x-internal=concept-url-query>query</a>.</p>

      <p>Append <var>body</var> to <var>parsed action</var>'s <a href=https://url.spec.whatwg.org/#concept-url-query id=form-submission-algorithm:concept-url-query-6 data-x-internal=concept-url-query>query</a>.</p>

      <p><a href=#plan-to-navigate id=form-submission-algorithm:plan-to-navigate-5>Plan to navigate</a> to <var>parsed action</var>.</p>
     </dl>
   </ol>


  <h5 id=constructing-form-data-set><span class=secno>4.10.22.4</span> Constructing the entry list<a href=#constructing-form-data-set class=self-link></a></h5>

  <p>An <dfn id=entry-list data-export="">entry list</dfn> is a <a id=constructing-form-data-set:list href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a> of <a href=#form-entry id=constructing-form-data-set:form-entry>entries</a>, typically representing the contents of a form. An <dfn data-dfn-for="entry list" id=form-entry data-export="">entry</dfn> is a tuple consisting of a <dfn data-dfn-for="entry list/entry" id=form-entry-name data-export="">name</dfn> (a <a id=constructing-form-data-set:scalar-value-string href=https://infra.spec.whatwg.org/#scalar-value-string data-x-internal=scalar-value-string>scalar value string</a>) and a <dfn data-dfn-for="entry list/entry" id=form-entry-value data-export="">value</dfn> (either a <a id=constructing-form-data-set:scalar-value-string-2 href=https://infra.spec.whatwg.org/#scalar-value-string data-x-internal=scalar-value-string>scalar value
  string</a> or a <code id=constructing-form-data-set:file><a data-x-internal=file href=https://w3c.github.io/FileAPI/#dfn-file>File</a></code> object).</p>

  <p id=append-an-entry>To <dfn data-dfn-for="entry list" id=create-an-entry data-export="">create an entry</dfn> given a string
  <var>name</var>, a string or <code id=constructing-form-data-set:blob><a data-x-internal=blob href=https://w3c.github.io/FileAPI/#dfn-Blob>Blob</a></code> object <var>value</var>, and optionally a
  <a id=constructing-form-data-set:scalar-value-string-3 href=https://infra.spec.whatwg.org/#scalar-value-string data-x-internal=scalar-value-string>scalar value string</a> <var>filename</var>:</p>

  <ol><li><p>Set <var>name</var> to the result of <a href=https://infra.spec.whatwg.org/#javascript-string-convert id=constructing-form-data-set:convert data-x-internal=convert>converting</a>
   <var>name</var> into a <a id=constructing-form-data-set:scalar-value-string-4 href=https://infra.spec.whatwg.org/#scalar-value-string data-x-internal=scalar-value-string>scalar value string</a>.<li><p>If <var>value</var> is a string, then set <var>value</var> to the result of <a href=https://infra.spec.whatwg.org/#javascript-string-convert id=constructing-form-data-set:convert-2 data-x-internal=convert>converting</a> <var>value</var> into a <a id=constructing-form-data-set:scalar-value-string-5 href=https://infra.spec.whatwg.org/#scalar-value-string data-x-internal=scalar-value-string>scalar value
   string</a>.<li>
    <p>Otherwise:</p>

    <ol><li><p>If <var>value</var> is not a <code id=constructing-form-data-set:file-2><a data-x-internal=file href=https://w3c.github.io/FileAPI/#dfn-file>File</a></code> object, then set <var>value</var> to a
     new <code id=constructing-form-data-set:file-3><a data-x-internal=file href=https://w3c.github.io/FileAPI/#dfn-file>File</a></code> object, representing the same bytes, whose <code id=constructing-form-data-set:dom-file-name><a data-x-internal=dom-file-name href=https://w3c.github.io/FileAPI/#dfn-name>name</a></code> attribute value is "<code>blob</code>".<li><p>If <var>filename</var> is given, then set <var>value</var> to a new <code id=constructing-form-data-set:file-4><a data-x-internal=file href=https://w3c.github.io/FileAPI/#dfn-file>File</a></code>
     object, representing the same bytes, whose <code id=constructing-form-data-set:dom-file-name-2><a data-x-internal=dom-file-name href=https://w3c.github.io/FileAPI/#dfn-name>name</a></code> attribute
     is <var>filename</var>.</ol>

    <p class=note>These operations will create a new <code id=constructing-form-data-set:file-5><a data-x-internal=file href=https://w3c.github.io/FileAPI/#dfn-file>File</a></code> object if either
    <var>filename</var> is given or the passed <code id=constructing-form-data-set:blob-2><a data-x-internal=blob href=https://w3c.github.io/FileAPI/#dfn-Blob>Blob</a></code> is not a <code id=constructing-form-data-set:file-6><a data-x-internal=file href=https://w3c.github.io/FileAPI/#dfn-file>File</a></code> object.
    In those cases, the identity of the passed <code id=constructing-form-data-set:blob-3><a data-x-internal=blob href=https://w3c.github.io/FileAPI/#dfn-Blob>Blob</a></code> object is not kept.</p>
   <li><p>Return an <a href=#form-entry id=constructing-form-data-set:form-entry-2>entry</a> whose <a href=#form-entry-name id=constructing-form-data-set:form-entry-name>name</a> is <var>name</var> and whose <a href=#form-entry-value id=constructing-form-data-set:form-entry-value>value</a> is
   <var>value</var>.</ol>

  <p>To <dfn id=constructing-the-form-data-set data-lt="constructing the entry list" data-export="">construct the entry list</dfn> given a <var>form</var>, an
  optional <var>submitter</var> (default null), and an optional <var>encoding</var> (default
  <a id=constructing-form-data-set:utf-8 href=https://encoding.spec.whatwg.org/#utf-8 data-x-internal=utf-8>UTF-8</a>):

  <ol><li><p>If <var>form</var>'s <a href=#constructing-entry-list id=constructing-form-data-set:constructing-entry-list>constructing entry list</a> is true, then return
   null.<li><p>Set <var>form</var>'s <a href=#constructing-entry-list id=constructing-form-data-set:constructing-entry-list-2>constructing entry list</a> to true.<li><p>Let <var>controls</var> be a list of all the <a href=forms.html#category-submit id=constructing-form-data-set:category-submit>submittable elements</a> whose <a href=#form-owner id=constructing-form-data-set:form-owner>form owner</a> is <var>form</var>, in <a id=constructing-form-data-set:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>.<li><p>Let <var>entry list</var> be a new empty <a href=#entry-list id=constructing-form-data-set:entry-list>entry list</a>.<li>
    <p>For each element <var>field</var> in <var>controls</var>, in <a id=constructing-form-data-set:tree-order-2 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>:</p>

    <ol><li>
      <p>If any of the following are true:</p>

      <ul><li><p><var>field</var> has a <code id=constructing-form-data-set:the-datalist-element><a href=form-elements.html#the-datalist-element>datalist</a></code> element ancestor;<li><p><var>field</var> is <a href=#concept-fe-disabled id=constructing-form-data-set:concept-fe-disabled>disabled</a>;<li><p><var>field</var> is a <a href=forms.html#concept-button id=constructing-form-data-set:concept-button>button</a> but it is not
       <var>submitter</var>;<li><p><var>field</var> is an <code id=constructing-form-data-set:the-input-element><a href=input.html#the-input-element>input</a></code> element whose <code id=constructing-form-data-set:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#checkbox-state-(type=checkbox)" id="constructing-form-data-set:checkbox-state-(type=checkbox)">Checkbox</a> state and whose <a href=#concept-fe-checked id=constructing-form-data-set:concept-fe-checked>checkedness</a> is false; or<li><p><var>field</var> is an <code id=constructing-form-data-set:the-input-element-2><a href=input.html#the-input-element>input</a></code> element whose <code id=constructing-form-data-set:attr-input-type-2><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#radio-button-state-(type=radio)" id="constructing-form-data-set:radio-button-state-(type=radio)">Radio Button</a> state and whose <a href=#concept-fe-checked id=constructing-form-data-set:concept-fe-checked-2>checkedness</a> is false,</ul>

      <p>then <a id=constructing-form-data-set:continue href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>continue</a>.</p>
     <li>
      <p>If the <var>field</var> element is an <code id=constructing-form-data-set:the-input-element-3><a href=input.html#the-input-element>input</a></code> element whose <code id=constructing-form-data-set:attr-input-type-3><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#image-button-state-(type=image)" id="constructing-form-data-set:image-button-state-(type=image)">Image Button</a> state, then:</p>

      <ol><li><p>If the <var>field</var> element is not <var>submitter</var>, then
       <a id=constructing-form-data-set:continue-2 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>continue</a>.<li><p>If the <var>field</var> element has a <code id=constructing-form-data-set:attr-fe-name><a href=#attr-fe-name>name</a></code>
       attribute specified and its value is not the empty string, let <var>name</var> be that value
       followed by U+002E (.). Otherwise, let <var>name</var> be the empty string.<li><p>Let <var>name<sub>x</sub></var> be the concatenation of <var>name</var> and
       U+0078 (x).<li><p>Let <var>name<sub>y</sub></var> be the concatenation of <var>name</var> and
       U+0079 (y).<li><p>Let (<var>x</var>, <var>y</var>) be the <a href=input.html#concept-input-type-image-coordinate id=constructing-form-data-set:concept-input-type-image-coordinate>selected coordinate</a>.<li><p><a href=#create-an-entry id=constructing-form-data-set:create-an-entry>Create an entry</a> with <var>name<sub>x</sub></var> and <var>x</var>, and
       <a href=https://infra.spec.whatwg.org/#list-append id=constructing-form-data-set:list-append data-x-internal=list-append>append</a> it to <var>entry list</var>.<li><p><a href=#create-an-entry id=constructing-form-data-set:create-an-entry-2>Create an entry</a> with <var>name<sub>y</sub></var> and <var>y</var>, and
       <a href=https://infra.spec.whatwg.org/#list-append id=constructing-form-data-set:list-append-2 data-x-internal=list-append>append</a> it to <var>entry list</var>.<li><p><a id=constructing-form-data-set:continue-3 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>Continue</a>.</ol>
     <li><p>If the <var>field</var> is a <a id=constructing-form-data-set:form-associated-custom-element href=custom-elements.html#form-associated-custom-element>form-associated custom element</a>, then perform
     the <a href=custom-elements.html#face-entry-construction id=constructing-form-data-set:face-entry-construction>entry construction algorithm</a> given
     <var>field</var> and <var>entry list</var>, then <a id=constructing-form-data-set:continue-4 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>continue</a>.<li><p>If either the <var>field</var> element does not have a
     <code id=constructing-form-data-set:attr-fe-name-2><a href=#attr-fe-name>name</a></code> attribute specified, or its
     <code id=constructing-form-data-set:attr-fe-name-3><a href=#attr-fe-name>name</a></code> attribute's value is the empty string, then
     <a id=constructing-form-data-set:continue-5 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>continue</a>.<li><p>Let <var>name</var> be the value of the <var>field</var> element's
     <code id=constructing-form-data-set:attr-fe-name-4><a href=#attr-fe-name>name</a></code> attribute.<li><p>If the <var>field</var> element is a <code id=constructing-form-data-set:the-select-element><a href=form-elements.html#the-select-element>select</a></code> element, then for each
     <code id=constructing-form-data-set:the-option-element><a href=form-elements.html#the-option-element>option</a></code> element in the <code id=constructing-form-data-set:the-select-element-2><a href=form-elements.html#the-select-element>select</a></code> element's <a href=form-elements.html#concept-select-option-list id=constructing-form-data-set:concept-select-option-list>list of options</a> whose <a href=form-elements.html#concept-option-selectedness id=constructing-form-data-set:concept-option-selectedness>selectedness</a> is true and that is not <a href=form-elements.html#concept-option-disabled id=constructing-form-data-set:concept-option-disabled>disabled</a>, <a href=#create-an-entry id=constructing-form-data-set:create-an-entry-3>create an entry</a> with
     <var>name</var> and the <a href=form-elements.html#concept-option-value id=constructing-form-data-set:concept-option-value>value</a> of the
     <code id=constructing-form-data-set:the-option-element-2><a href=form-elements.html#the-option-element>option</a></code> element, and <a href=https://infra.spec.whatwg.org/#list-append id=constructing-form-data-set:list-append-3 data-x-internal=list-append>append</a> it to <var>entry
     list</var>.<li>
      <p>Otherwise, if the <var>field</var> element is an <code id=constructing-form-data-set:the-input-element-4><a href=input.html#the-input-element>input</a></code> element whose
      <code id=constructing-form-data-set:attr-input-type-4><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#checkbox-state-(type=checkbox)" id="constructing-form-data-set:checkbox-state-(type=checkbox)-2">Checkbox</a> state or the <a href="input.html#radio-button-state-(type=radio)" id="constructing-form-data-set:radio-button-state-(type=radio)-2">Radio Button</a> state, then:</p>

      <ol><li><p>If the <var>field</var> element has a <code id=constructing-form-data-set:attr-input-value><a href=input.html#attr-input-value>value</a></code> attribute specified, then let <var>value</var>
       be the value of that attribute; otherwise, let <var>value</var> be the string "<code>on</code>".<li><p><a href=#create-an-entry id=constructing-form-data-set:create-an-entry-4>Create an entry</a> with <var>name</var> and <var>value</var>, and <a href=https://infra.spec.whatwg.org/#list-append id=constructing-form-data-set:list-append-4 data-x-internal=list-append>append</a> it to <var>entry list</var>.</ol>
     <li>
      <p>Otherwise, if the <var>field</var> element is an <code id=constructing-form-data-set:the-input-element-5><a href=input.html#the-input-element>input</a></code> element whose <code id=constructing-form-data-set:attr-input-type-5><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#file-upload-state-(type=file)" id="constructing-form-data-set:file-upload-state-(type=file)">File Upload</a> state, then:</p>

      <ol><li><p>If there are no <a href=input.html#concept-input-type-file-selected id=constructing-form-data-set:concept-input-type-file-selected>selected files</a>,
       then <a href=#create-an-entry id=constructing-form-data-set:create-an-entry-5>create an entry</a> with <var>name</var> and a new <code id=constructing-form-data-set:file-7><a data-x-internal=file href=https://w3c.github.io/FileAPI/#dfn-file>File</a></code> object
       with an empty name, <code id=constructing-form-data-set:application/octet-stream><a data-x-internal=application/octet-stream href=https://www.rfc-editor.org/rfc/rfc2046#section-4.5.1>application/octet-stream</a></code> as type, and an empty body, and
       <a href=https://infra.spec.whatwg.org/#list-append id=constructing-form-data-set:list-append-5 data-x-internal=list-append>append</a> it to <var>entry list</var>.<li><p>Otherwise, for each file in <a href=input.html#concept-input-type-file-selected id=constructing-form-data-set:concept-input-type-file-selected-2>selected
       files</a>, <a href=#create-an-entry id=constructing-form-data-set:create-an-entry-6>create an entry</a> with <var>name</var> and a <code id=constructing-form-data-set:file-8><a data-x-internal=file href=https://w3c.github.io/FileAPI/#dfn-file>File</a></code>
       object representing the file, and <a href=https://infra.spec.whatwg.org/#list-append id=constructing-form-data-set:list-append-6 data-x-internal=list-append>append</a> it to <var>entry
       list</var>.</ol>
     <li>
      <p>Otherwise, if the <var>field</var> element is an <code id=constructing-form-data-set:the-input-element-6><a href=input.html#the-input-element>input</a></code> element whose <code id=constructing-form-data-set:attr-input-type-6><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#hidden-state-(type=hidden)" id="constructing-form-data-set:hidden-state-(type=hidden)">Hidden</a> state and <var>name</var> is an <a id=constructing-form-data-set:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII
      case-insensitive</a> match for "<code id=constructing-form-data-set:attr-fe-name-charset><a href=#attr-fe-name-charset>_charset_</a></code>":</p>

      <ol><li><p>Let <var>charset</var> be the <a href=https://encoding.spec.whatwg.org/#name id=constructing-form-data-set:encoding-name data-x-internal=encoding-name>name</a> of
       <var>encoding</var>.<li><p><a href=#create-an-entry id=constructing-form-data-set:create-an-entry-7>Create an entry</a> with <var>name</var> and <var>charset</var>, and <a href=https://infra.spec.whatwg.org/#list-append id=constructing-form-data-set:list-append-7 data-x-internal=list-append>append</a> it to <var>entry list</var>.</ol>
     <li><p>Otherwise, <a href=#create-an-entry id=constructing-form-data-set:create-an-entry-8>create an entry</a> with <var>name</var> and the <a href=#concept-fe-value id=constructing-form-data-set:concept-fe-value>value</a> of the <var>field</var> element, and <a href=https://infra.spec.whatwg.org/#list-append id=constructing-form-data-set:list-append-8 data-x-internal=list-append>append</a> it to <var>entry list</var>.<li>
      <p>If the element has a <code id=constructing-form-data-set:attr-fe-dirname><a href=#attr-fe-dirname>dirname</a></code> attribute, that
      attribute's value is not the empty string, and the element is an <a href=dom.html#auto-directionality-form-associated-elements id=constructing-form-data-set:auto-directionality-form-associated-elements>auto-directionality form-associated
      element</a>:

      <ol><li><p>Let <var>dirname</var> be the value of the element's <code id=constructing-form-data-set:attr-fe-dirname-2><a href=#attr-fe-dirname>dirname</a></code> attribute.<li><p>Let <var>dir</var> be the string "<code>ltr</code>" if <a id=constructing-form-data-set:the-directionality href=dom.html#the-directionality>the
       directionality</a> of the element is '<a href=dom.html#concept-ltr id=constructing-form-data-set:concept-ltr>ltr</a>', and "<code>rtl</code>" otherwise (i.e., when <a id=constructing-form-data-set:the-directionality-2 href=dom.html#the-directionality>the directionality</a> of the element is
       '<a href=dom.html#concept-rtl id=constructing-form-data-set:concept-rtl>rtl</a>').<li><p><a href=#create-an-entry id=constructing-form-data-set:create-an-entry-9>Create an entry</a> with <var>dirname</var> and <var>dir</var>, and <a href=https://infra.spec.whatwg.org/#list-append id=constructing-form-data-set:list-append-9 data-x-internal=list-append>append</a> it to <var>entry list</var>.</ol>
     </ol>
   <li><p>Let <var>form data</var> be a new <code id=constructing-form-data-set:formdata><a data-x-internal=formdata href=https://xhr.spec.whatwg.org/#formdata>FormData</a></code> object associated with
   <var>entry list</var>.<li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id=constructing-form-data-set:concept-event-fire data-x-internal=concept-event-fire>Fire an event</a> named
   <code id=constructing-form-data-set:event-formdata><a href=indices.html#event-formdata>formdata</a></code> at <var>form</var> using
   <code id=constructing-form-data-set:formdataevent><a href=#formdataevent>FormDataEvent</a></code>, with the <code id=constructing-form-data-set:dom-formdataevent-formdata><a href=#dom-formdataevent-formdata>formData</a></code>
   attribute initialized to <var>form data</var> and the
   <code id=constructing-form-data-set:dom-event-bubbles><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code> attribute initialized to true.<li><p>Set <var>form</var>'s <a href=#constructing-entry-list id=constructing-form-data-set:constructing-entry-list-3>constructing entry list</a> to false.<li><p>Return a <a href=https://infra.spec.whatwg.org/#list-clone id=constructing-form-data-set:list-clone data-x-internal=list-clone>clone</a> of <var>entry list</var>.</ol>

  


  

  <h5 id=selecting-a-form-submission-encoding><span class=secno>4.10.22.5</span> Selecting a form submission encoding<a href=#selecting-a-form-submission-encoding class=self-link></a></h5>

  <p>If the user agent is to <dfn id=picking-an-encoding-for-the-form>pick an encoding for a
  form</dfn>, it must run the following steps:</p>

  <ol><li><p>Let <var>encoding</var> be the <a id="selecting-a-form-submission-encoding:document's-character-encoding" href=https://dom.spec.whatwg.org/#concept-document-encoding data-x-internal="document's-character-encoding">document's character encoding</a>.<li>
    <p>If the <code id=selecting-a-form-submission-encoding:the-form-element><a href=forms.html#the-form-element>form</a></code> element has an <code id=selecting-a-form-submission-encoding:attr-form-accept-charset><a href=forms.html#attr-form-accept-charset>accept-charset</a></code> attribute, set <var>encoding</var> to
    the return value of running these substeps:</p>

    <ol><li><p>Let <var>input</var> be the value of the <code id=selecting-a-form-submission-encoding:the-form-element-2><a href=forms.html#the-form-element>form</a></code> element's <code id=selecting-a-form-submission-encoding:attr-form-accept-charset-2><a href=forms.html#attr-form-accept-charset>accept-charset</a></code> attribute.<li><p>Let <var>candidate encoding labels</var> be the result of <a href=https://infra.spec.whatwg.org/#split-on-ascii-whitespace id=selecting-a-form-submission-encoding:split-a-string-on-spaces data-x-internal=split-a-string-on-spaces>splitting <var>input</var> on ASCII whitespace</a>.<li><p>Let <var>candidate encodings</var> be an empty list of <a href=https://encoding.spec.whatwg.org/#encoding id=selecting-a-form-submission-encoding:encoding data-x-internal=encoding>character
     encodings</a>.<li><p>For each token in <var>candidate encoding labels</var> in turn (in the order in which
     they were found in <var>input</var>), <a href=https://encoding.spec.whatwg.org/#concept-encoding-get id=selecting-a-form-submission-encoding:getting-an-encoding data-x-internal=getting-an-encoding>get an encoding</a>
     for the token and, if this does not result in failure, append the <a id=selecting-a-form-submission-encoding:encoding-2 href=https://encoding.spec.whatwg.org/#encoding data-x-internal=encoding>encoding</a> to
     <var>candidate encodings</var>.<li><p>If <var>candidate encodings</var> is empty, return <a id=selecting-a-form-submission-encoding:utf-8 href=https://encoding.spec.whatwg.org/#utf-8 data-x-internal=utf-8>UTF-8</a>.<li><p>Return the first encoding in <var>candidate encodings</var>.</ol>
   <li><p>Return the result of <a href=https://encoding.spec.whatwg.org/#get-an-output-encoding id=selecting-a-form-submission-encoding:get-an-output-encoding data-x-internal=get-an-output-encoding>getting an output
   encoding</a> from <var>encoding</var>.</ol>

  

  

  <h5 id=converting-an-entry-list-to-a-list-of-name-value-pairs><span class=secno>4.10.22.6</span> Converting an entry list to a list of name-value pairs<a href=#converting-an-entry-list-to-a-list-of-name-value-pairs class=self-link></a></h5>

  <p>The <code id=converting-an-entry-list-to-a-list-of-name-value-pairs:application/x-www-form-urlencoded><a data-x-internal=application/x-www-form-urlencoded href=https://url.spec.whatwg.org/#concept-urlencoded>application/x-www-form-urlencoded</a></code> and <code id=converting-an-entry-list-to-a-list-of-name-value-pairs:text/plain-encoding-algorithm><a href=#text/plain-encoding-algorithm>text/plain</a></code> encoding algorithms take a list of name-value pairs, where the values
  must be strings, rather than an <a href=#entry-list id=converting-an-entry-list-to-a-list-of-name-value-pairs:entry-list>entry list</a> where the value can be a
  <code id=converting-an-entry-list-to-a-list-of-name-value-pairs:file><a data-x-internal=file href=https://w3c.github.io/FileAPI/#dfn-file>File</a></code>. The following algorithm performs the conversion.</p>

  <p>To <dfn id=convert-to-a-list-of-name-value-pairs>convert to a list of name-value pairs</dfn> an <a href=#entry-list id=converting-an-entry-list-to-a-list-of-name-value-pairs:entry-list-2>entry list</a> <var>entry
  list</var>, run these steps:</p>

  <ol><li><p>Let <var>list</var> be an empty <a id=converting-an-entry-list-to-a-list-of-name-value-pairs:list href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a> of name-value pairs.<li>
    <p><a href=https://infra.spec.whatwg.org/#list-iterate id=converting-an-entry-list-to-a-list-of-name-value-pairs:list-iterate data-x-internal=list-iterate>For each</a> <var>entry</var> of <var>entry list</var>:</p>

    <ol><li><p>Let <var>name</var> be <var>entry</var>'s <a href=#form-entry-name id=converting-an-entry-list-to-a-list-of-name-value-pairs:form-entry-name>name</a>,
     with every occurrence of U+000D (CR) not followed by U+000A (LF), and every occurrence of
     U+000A (LF) not preceded by U+000D (CR), replaced by a string consisting of U+000D (CR) and
     U+000A (LF).<li><p>If <var>entry</var>'s <a href=#form-entry-value id=converting-an-entry-list-to-a-list-of-name-value-pairs:form-entry-value>value</a> is a
     <code id=converting-an-entry-list-to-a-list-of-name-value-pairs:file-2><a data-x-internal=file href=https://w3c.github.io/FileAPI/#dfn-file>File</a></code> object, then let <var>value</var> be <var>entry</var>'s <a href=#form-entry-value id=converting-an-entry-list-to-a-list-of-name-value-pairs:form-entry-value-2>value</a>'s <code id=converting-an-entry-list-to-a-list-of-name-value-pairs:dom-file-name><a data-x-internal=dom-file-name href=https://w3c.github.io/FileAPI/#dfn-name>name</a></code>. Otherwise, let
     <var>value</var> be <var>entry</var>'s <a href=#form-entry-value id=converting-an-entry-list-to-a-list-of-name-value-pairs:form-entry-value-3>value</a>.<li><p>Replace every occurrence of U+000D (CR) not followed by U+000A (LF), and every occurrence
     of U+000A (LF) not preceded by U+000D (CR), in <var>value</var>, by a string consisting of
     U+000D (CR) and U+000A (LF).<li><p><a href=https://infra.spec.whatwg.org/#list-append id=converting-an-entry-list-to-a-list-of-name-value-pairs:list-append data-x-internal=list-append>Append</a> to <var>list</var> a new name-value pair whose
     name is <var>name</var> and whose value is <var>value</var>.</ol>
   <li><p>Return <var>list</var>.</ol>

  


  <h5 id=url-encoded-form-data><span class=secno>4.10.22.7</span> URL-encoded form data<a href=#url-encoded-form-data class=self-link></a></h5>

  <p id=application-x-www-form-urlencoded-encoding-algorithm><span id=application/x-www-form-urlencoded-encoding-algorithm></span>See <cite>URL</cite> for details
  on <code id=url-encoded-form-data:application/x-www-form-urlencoded><a data-x-internal=application/x-www-form-urlencoded href=https://url.spec.whatwg.org/#concept-urlencoded>application/x-www-form-urlencoded</a></code>. <a href=references.html#refsURL>[URL]</a></p>


  <h5 id=multipart-form-data><span class=secno>4.10.22.8</span> Multipart form data<a href=#multipart-form-data class=self-link></a></h5>

  

  

  

  <p>The <dfn id=multipart/form-data-encoding-algorithm data-export=""><code>multipart/form-data</code> encoding algorithm</dfn>, given an <a href=#entry-list id=multipart-form-data:entry-list>entry
  list</a> <var>entry list</var> and an <a id=multipart-form-data:encoding href=https://encoding.spec.whatwg.org/#encoding data-x-internal=encoding>encoding</a> <var>encoding</var>, is as
  follows:</p>

  <ol><li>
    <p><a href=https://infra.spec.whatwg.org/#list-iterate id=multipart-form-data:list-iterate data-x-internal=list-iterate>For each</a> <var>entry</var> of <var>entry list</var>:</p>

    <ol><li><p>Replace every occurrence of U+000D (CR) not followed by U+000A (LF), and every
     occurrence of U+000A (LF) not preceded by U+000D (CR), in <var>entry</var>'s <a href=#form-entry-name id=multipart-form-data:form-entry-name>name</a>, by a string consisting of a U+000D (CR) and U+000A (LF).<li><p>If <var>entry</var>'s <a href=#form-entry-value id=multipart-form-data:form-entry-value>value</a> is not a
     <code id=multipart-form-data:file><a data-x-internal=file href=https://w3c.github.io/FileAPI/#dfn-file>File</a></code> object, then replace every occurrence of U+000D (CR) not followed by U+000A
     (LF), and every occurrence of U+000A (LF) not preceded by U+000D (CR), in <var>entry</var>'s
     <a href=#form-entry-value id=multipart-form-data:form-entry-value-2>value</a>, by a string consisting of a U+000D (CR) and
     U+000A (LF).</ol>
   <li>
    <p>Return the byte sequence resulting from encoding the <var>entry list</var> using the rules
    described by RFC 7578, <cite>Returning Values from Forms: <code>multipart/form-data</code></cite>, given the following conditions:
    <a href=references.html#refsRFC7578>[RFC7578]</a></p>

    <ul><li><p>Each <a href=#form-entry id=multipart-form-data:form-entry>entry</a> in <var>entry list</var> is a <i>field</i>,
     the <a href=#form-entry-name id=multipart-form-data:form-entry-name-2>name</a> of the entry is the <i>field name</i> and the
     <a href=#form-entry-value id=multipart-form-data:form-entry-value-3>value</a> of the entry is the <i>field value</i>.<li><p>The order of parts must be the same as the order of fields in <var>entry list</var>.
     Multiple entries with the same name must be treated as distinct fields.<li><p>Field names, field values for non-file fields, and filenames for file fields, in the
     generated <code id=multipart-form-data:multipart/form-data><a href=indices.html#multipart/form-data>multipart/form-data</a></code> resource must be set to the result of <a href=https://encoding.spec.whatwg.org/#encode id=multipart-form-data:encode data-x-internal=encode>encoding</a> the corresponding entry's name or value with
     <var>encoding</var>, converted to a byte sequence.<li><p>For field names and filenames for file fields, the result of the encoding in the
     previous bullet point must be escaped by replacing any 0x0A (LF) bytes with the byte sequence
     `<code>%0A</code>`, 0x0D (CR) with `<code>%0D</code>` and 0x22 (") with
     `<code>%22</code>`. The user agent must not perform any other escapes.<li><p>The parts of the generated <code id=multipart-form-data:multipart/form-data-2><a href=indices.html#multipart/form-data>multipart/form-data</a></code> resource that correspond to
     non-file fields must not have a `<code id=multipart-form-data:content-type><a href=urls-and-fetching.html#content-type>Content-Type</a></code>` header specified.<li><p>The boundary used by the user agent in generating the return value of this algorithm is
     the <dfn id=multipart/form-data-boundary-string data-export=""><code>multipart/form-data</code> boundary string</dfn>. (This value is used to
     generate the MIME type of the form submission payload generated by this algorithm.)</ul>
   </ol>

  

  <p>For details on how to interpret <code id=multipart-form-data:multipart/form-data-3><a href=indices.html#multipart/form-data>multipart/form-data</a></code> payloads, see RFC 7578.
  <a href=references.html#refsRFC7578>[RFC7578]</a></p>


  <h5 id=plain-text-form-data><span class=secno>4.10.22.9</span> Plain text form data<a href=#plain-text-form-data class=self-link></a></h5>

  

  <p>The <dfn id=text/plain-encoding-algorithm><code>text/plain</code> encoding algorithm</dfn>, given a list of name-value
  pairs <var>pairs</var>, is as follows:</p>

  <ol><li><p>Let <var>result</var> be the empty string.<li>
    <p>For each <var>pair</var> in <var>pairs</var>:</p>

    <ol><li><p>Append <var>pair</var>'s name to <var>result</var>.<li><p>Append a single U+003D EQUALS SIGN character (=) to <var>result</var>.<li><p>Append <var>pair</var>'s value to <var>result</var>.<li><p>Append a U+000D CARRIAGE RETURN (CR) U+000A LINE FEED (LF) character pair to <var>result</var>.</ol>
   <li><p>Return <var>result</var>.</ol>

  

  <p>Payloads using the <code id=plain-text-form-data:text/plain><a data-x-internal=text/plain href=https://www.rfc-editor.org/rfc/rfc2046#section-4.1.3>text/plain</a></code> format are intended to be human readable. They are
  not reliably interpretable by computer, as the format is ambiguous (for example, there is no way
  to distinguish a literal newline in a value from the newline at the end of the value).</p>

  <h5 id=the-submitevent-interface><span class=secno>4.10.22.10</span> The <code id=the-submitevent-interface:submitevent><a href=#submitevent>SubmitEvent</a></code> interface<a href=#the-submitevent-interface class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent title="The SubmitEvent interface defines the object used to represent an HTML form's submit event. This event is fired at the <form> when the form's submit action is invoked.">SubmitEvent</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>75+</span></span><span class="safari yes"><span>Safari</span><span>15+</span></span><span class="chrome yes"><span>Chrome</span><span>81+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>81+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/SubmitEvent title="The SubmitEvent() constructor creates and returns a new SubmitEvent object, which is used to represent a submit event fired at an HTML form.">SubmitEvent/SubmitEvent</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>75+</span></span><span class="safari yes"><span>Safari</span><span>15+</span></span><span class="chrome yes"><span>Chrome</span><span>81+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>81+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='submitevent' data-dfn-type='interface'><c- g>SubmitEvent</c-></dfn> : <a id='the-submitevent-interface:event' href='https://dom.spec.whatwg.org/#interface-event' data-x-internal='event'><c- n>Event</c-></a> {
  <c- g>constructor</c->(<c- b>DOMString</c-> <c- g>type</c->, <c- b>optional</c-> <a href='#submiteventinit' id='the-submitevent-interface:submiteventinit'><c- n>SubmitEventInit</c-></a> <c- g>eventInitDict</c-> = {});

  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-submitevent-interface:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a>? <a href='#dom-submitevent-submitter' id='the-submitevent-interface:dom-submitevent-submitter'><c- g>submitter</c-></a>;
};

<c- b>dictionary</c-> <dfn id='submiteventinit' data-dfn-type='dictionary'><c- g>SubmitEventInit</c-></dfn> : <a id='the-submitevent-interface:eventinit' href='https://dom.spec.whatwg.org/#dictdef-eventinit' data-x-internal='eventinit'><c- n>EventInit</c-></a> {
  <a id='the-submitevent-interface:htmlelement-2' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a>? <c- g>submitter</c-> = <c- b>null</c->;
};</code></pre>

  <dl class=domintro><dt><code><var>event</var>.<a href=#dom-submitevent-submitter id=the-submitevent-interface:dom-submitevent-submitter-2>submitter</a></code><dd><p>Returns the element representing the <a href=forms.html#concept-submit-button id=the-submitevent-interface:concept-submit-button>submit
   button</a> that triggered the <a href=#form-submission-2 id=the-submitevent-interface:form-submission-2>form submission</a>, or null if the submission was not
   triggered by a button.</dl>

  

  <p>The <dfn data-dfn-for=SubmitEvent id=dom-submitevent-submitter data-dfn-type=attribute><code>submitter</code></dfn> attribute must return the value it was
  initialized to.</p>

  

  <h5 id=the-formdataevent-interface><span class=secno>4.10.22.11</span> The <code id=the-formdataevent-interface:formdataevent><a href=#formdataevent>FormDataEvent</a></code> interface<a href=#the-formdataevent-interface class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/FormDataEvent/FormDataEvent title="The FormDataEvent() constructor creates a new FormDataEvent object.">FormDataEvent/FormDataEvent</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>72+</span></span><span class="safari yes"><span>Safari</span><span>15+</span></span><span class="chrome yes"><span>Chrome</span><span>77+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/FormDataEvent title="The FormDataEvent interface represents a formdata event — such an event is fired on an HTMLFormElement object after the entry list representing the form's data is constructed. This happens when the form is submitted, but can also be triggered by the invocation of a FormData() constructor.">FormDataEvent</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>72+</span></span><span class="safari yes"><span>Safari</span><span>15+</span></span><span class="chrome yes"><span>Chrome</span><span>77+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='formdataevent' data-dfn-type='interface'><c- g>FormDataEvent</c-></dfn> : <a id='the-formdataevent-interface:event' href='https://dom.spec.whatwg.org/#interface-event' data-x-internal='event'><c- n>Event</c-></a> {
  <c- g>constructor</c->(<c- b>DOMString</c-> <c- g>type</c->, <a href='#formdataeventinit' id='the-formdataevent-interface:formdataeventinit'><c- n>FormDataEventInit</c-></a> <c- g>eventInitDict</c->);

  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-formdataevent-interface:formdata' href='https://xhr.spec.whatwg.org/#formdata' data-x-internal='formdata'><c- n>FormData</c-></a> <a href='#dom-formdataevent-formdata' id='the-formdataevent-interface:dom-formdataevent-formdata'><c- g>formData</c-></a>;
};

<c- b>dictionary</c-> <dfn id='formdataeventinit' data-dfn-type='dictionary'><c- g>FormDataEventInit</c-></dfn> : <a id='the-formdataevent-interface:eventinit' href='https://dom.spec.whatwg.org/#dictdef-eventinit' data-x-internal='eventinit'><c- n>EventInit</c-></a> {
  <c- b>required</c-> <a id='the-formdataevent-interface:formdata-2' href='https://xhr.spec.whatwg.org/#formdata' data-x-internal='formdata'><c- n>FormData</c-></a> <c- g>formData</c->;
};</code></pre>

  <dl class=domintro><dt><code><var>event</var>.<a href=#dom-formdataevent-formdata id=the-formdataevent-interface:dom-formdataevent-formdata-2>formData</a></code><dd>
    <p>Returns a <code id=the-formdataevent-interface:formdata-3><a data-x-internal=formdata href=https://xhr.spec.whatwg.org/#formdata>FormData</a></code> object representing names and values of elements associated
    to the target <code id=the-formdataevent-interface:the-form-element><a href=forms.html#the-form-element>form</a></code>. Operations on the <code id=the-formdataevent-interface:formdata-4><a data-x-internal=formdata href=https://xhr.spec.whatwg.org/#formdata>FormData</a></code> object will affect form
    data to be submitted.</p>
   </dl>

  

  <p>The <dfn data-dfn-for=FormDataEvent id=dom-formdataevent-formdata data-dfn-type=attribute><code>formData</code></dfn> attribute must return the value it was
  initialized to. It represents a <code id=the-formdataevent-interface:formdata-5><a data-x-internal=formdata href=https://xhr.spec.whatwg.org/#formdata>FormData</a></code> object associated to the <a href=#entry-list id=the-formdataevent-interface:entry-list>entry
  list</a> that is <a href=#constructing-the-form-data-set id=the-formdataevent-interface:constructing-the-form-data-set>constructed</a> when the
  <code id=the-formdataevent-interface:the-form-element-2><a href=forms.html#the-form-element>form</a></code> is submitted.</p>

  <h4 id=resetting-a-form><span class=secno>4.10.23</span> Resetting a form<a href=#resetting-a-form class=self-link></a></h4>

  <p>When a <code id=resetting-a-form:the-form-element><a href=forms.html#the-form-element>form</a></code> element <var>form</var> is <dfn id=concept-form-reset>reset</dfn>, run these steps:</p>

  <ol><li><p>Let <var>reset</var> be the result of <a href=https://dom.spec.whatwg.org/#concept-event-fire id=resetting-a-form:concept-event-fire data-x-internal=concept-event-fire>firing an
   event</a> named <code id=resetting-a-form:event-reset><a href=indices.html#event-reset>reset</a></code> at <var>form</var>, with the <code id=resetting-a-form:dom-event-bubbles><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code> and <code id=resetting-a-form:dom-event-cancelable><a data-x-internal=dom-event-cancelable href=https://dom.spec.whatwg.org/#dom-event-cancelable>cancelable</a></code> attributes initialized to true.<li><p>If <var>reset</var> is true, then invoke the <a href=#concept-form-reset-control id=resetting-a-form:concept-form-reset-control>reset algorithm</a> of each <a href=forms.html#category-reset id=resetting-a-form:category-reset>resettable element</a> whose <a href=#form-owner id=resetting-a-form:form-owner>form owner</a> is
   <var>form</var>.</ol>

  <p>Each <a href=forms.html#category-reset id=resetting-a-form:category-reset-2>resettable element</a> defines its own <dfn id=concept-form-reset-control>reset algorithm</dfn>. Changes made to form controls as part of
  these algorithms do not count as changes caused by the user (and thus, e.g., do not cause <code id=resetting-a-form:event-input><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> events to fire).</p>

  



  <nav><a href=form-elements.html>← 4.10.6 The button element</a> — <a href=index.html>Table of Contents</a> — <a href=interactive-elements.html>4.11 Interactive elements →</a></nav>
